<!DOCTYPE html><html lang="zh-CN" data-theme="dark"><script>((function() {var callbacks = [],timeLimit = 50,open = false;setInterval(loop, 1);return {addListener: function(fn) {callbacks.push(fn);},cancleListenr: function(fn) {callbacks = callbacks.filter(function(v) {return v !== fn;});}}
function loop() {var startTime = new Date();debugger;if (new Date() - startTime > timeLimit) {if (!open) {callbacks.forEach(function(fn) {fn.call(null);});}open = true;window.stop();alert('你真坏，请关闭控制台！');document.body.innerHTML = "";} else {open = false;}}})()).addListener(function() {window.location.reload();});</script><script>function toDevtools(){
  let num = 0; 
  let devtools = new Date();
  devtools.toString = function() {
    num++;
    if (num > 1) {
        alert('你真坏，请关闭控制台！')
        window.location.href = "about:blank"
        blast();
    }
  }
  console.log('', devtools);
}
toDevtools();</script><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>基于 Hexo 从零开始搭建个人博客（六） | 唐志远の博客</title><meta name="keywords" content="Hexo,Butterfly,主题美化"><meta name="author" content="Ethan.Tzy"><meta name="copyright" content="Ethan.Tzy"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#0d0d0d"><meta name="description" content="阅读本篇前，请先阅读前几篇文章：基于 Hexo 从零开始搭建个人博客（一）基于 Hexo 从零开始搭建个人博客（二）基于 Hexo 从零开始搭建个人博客（三）基于 Hexo 从零开始搭建个人博客（四）基于 Hexo 从零开始搭建个人博客（五）  前言 本站基于Hexo搭建，用的 🦋 hexo-theme-butterfly 主题 v3.7.1，请注意最新的🦋 hexo-theme-butte">
<meta property="og:type" content="article">
<meta property="og:title" content="基于 Hexo 从零开始搭建个人博客（六）">
<meta property="og:url" content="https://fe32.top/articles/hexo1606/index.html">
<meta property="og:site_name" content="唐志远の博客">
<meta property="og:description" content="阅读本篇前，请先阅读前几篇文章：基于 Hexo 从零开始搭建个人博客（一）基于 Hexo 从零开始搭建个人博客（二）基于 Hexo 从零开始搭建个人博客（三）基于 Hexo 从零开始搭建个人博客（四）基于 Hexo 从零开始搭建个人博客（五）  前言 本站基于Hexo搭建，用的 🦋 hexo-theme-butterfly 主题 v3.7.1，请注意最新的🦋 hexo-theme-butte">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://bu.dusays.com/2022/06/05/629c5257753d1.png">
<meta property="article:published_time" content="2022-06-05T05:50:17.000Z">
<meta property="article:modified_time" content="2023-06-27T14:39:00.817Z">
<meta property="article:author" content="Ethan.Tzy">
<meta property="article:tag" content="Hexo">
<meta property="article:tag" content="Butterfly">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://bu.dusays.com/2022/06/05/629c5257753d1.png"><link rel="shortcut icon" href="https://bu.dusays.com/2022/05/17/6283c38e6368f.ico"><link rel="canonical" href="https://fe32.top/articles/hexo1606/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//fonts.googleapis.com" crossorigin=""/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="https://npm.elemecdn.com/ethan4116-blog/lib/@3.7.1/css/index.css"><link rel="stylesheet" href="https://npm.elemecdn.com/ethan4116-blog/lib/@3.7.1/css/fortawesome.all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/instantsearch.js@2.10.5/dist/instantsearch.min.css" media="print" onload="this.media='all'"><script src="https://npm.elemecdn.com/instantsearch.js@2.10.5/dist/instantsearch.min.js" defer></script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&amp;display=swap" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/ethan4116-blog/lib/css/animate.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/@3.7.1/',
  algolia: {"appId":"KYE9ZA4757","apiKey":"b5a21077c2b61488e5c748ace78c9340","indexName":"blog-tzy1997","hits":{"per_page":10},"languages":{"input_placeholder":"搜索文章","hits_empty":"找不到您查询的内容：${query}","hits_stats":"找到 ${hits} 条结果，用时 ${time} 毫秒"}},
  localSearch: undefined,
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":400},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":50,"languages":{"author":"作者: Ethan.Tzy","link":"链接: ","source":"来源: 唐志远の博客","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#6f42c1","position":"top-left"},
  source: {
    jQuery: 'https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js',
      css: 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.js',
      css: 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = { 
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-06-27 22:39:00'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const fontSizeVal = saveToLocal.get('global-font-size')
    if (fontSizeVal !== undefined) {
      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
    }
    })(window)</script><style type="text/css">#toggle-sidebar {bottom:70px}</style><link rel="stylesheet" href="https://npm.elemecdn.com/ethan4116-blog/lib/@3.7.1/css/ethan.css"><link rel="stylesheet" href="https://npm.elemecdn.com/ethan4116-blog/lib/css/plane_v2.css"><link rel="stylesheet" href="https://npm.elemecdn.com/ethan4116-blog/lib/right-menu/rightMenu.css"><meta name="generator" content="Hexo 5.2.0">
<style>.github-emoji { position: relative; display: inline-block; width: 1.2em; min-height: 1.2em; overflow: hidden; vertical-align: top; color: transparent; }  .github-emoji > span { position: relative; z-index: 10; }  .github-emoji img, .github-emoji .fancybox { margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; text-decoration: none !important; user-select: none !important; cursor: auto !important; }  .github-emoji img { height: 1.2em !important; width: 1.2em !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; user-select: none !important; cursor: auto !important; } .github-emoji-fallback { color: inherit; } .github-emoji-fallback img { opacity: 0 !important; }</style>
<link rel="alternate" href="/@3.7.1/atom.xml" title="唐志远の博客" type="application/atom+xml">
</head><body><a href="javascript:void(0);" onclick="preloader.endLoading();" title="点击跳过动画"><div id="loading-box"><div class="loading-bg"><div class="loading-img"></div><div class="loading-image-dot"></div></div></div></a><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" data-lazy-src="https://bu.dusays.com/2022/05/02/626f92e193879.jpg" onerror="onerror=null;src='https://bu.dusays.com/2021/03/27/0106da541a922.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/@3.7.1/archives/"><div class="headline">文章</div><div class="length-num">101</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/@3.7.1/tags/"><div class="headline">标签</div><div class="length-num">73</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/@3.7.1/categories/"><div class="headline">分类</div><div class="length-num">20</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/@3.7.1/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fas fa-book"></i><span> 文章</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/@3.7.1/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/@3.7.1/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/@3.7.1/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/@3.7.1/gallery/"><i class="fa-fw fas fa-camera-retro"></i><span> 相册</span></a></li><li><a class="site-page child" href="/@3.7.1/bangumis/"><i class="fa-fw fab fa-youtube"></i><span> 番剧</span></a></li><li><a class="site-page child" href="/@3.7.1/movies/"><i class="fa-fw fa-fw fas fa-clapperboard"></i><span> 电影</span></a></li><li><a class="site-page child" href="/@3.7.1/books/"><i class="fa-fw fas fa-book"></i><span> 书单</span></a></li><li><a class="site-page child" href="/@3.7.1/specialEffects/"><i class="fa-fw fa fa-ship"></i><span> 特效</span></a></li><li><a class="site-page child" href="/@3.7.1/wallpaper/"><i class="fa-fw fa-fw fas fa-images"></i><span> 壁纸</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/@3.7.1/sponsorWall/"><i class="fa-fw fa-fw fas fa-money-check-alt"></i><span> 赞助墙</span></a></div><div class="menus_item"><a class="site-page" href="/@3.7.1/comments/"><i class="fa-fw fas fa-comments"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/@3.7.1/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/@3.7.1/frdcenter/"><i class="fa-fw fa-fw fas fa-fish-fins"></i><span> 朋友圈</span></a></div><div class="menus_item"><a class="site-page" href="/@3.7.1/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fas fa-coffee"></i><span> 其他</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/@3.7.1/demandWall/"><i class="fa-fw fa fa-bug"></i><span> 需求墙</span></a></li><li><a class="site-page child" href="/@3.7.1/nav.html"><i class="fa-fw fa-fw fas fa-infinity"></i><span> 网址收藏</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://bu.dusays.com/2021/03/06/38a2c5cd8b44e.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/@3.7.1/">唐志远の博客</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/@3.7.1/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fas fa-book"></i><span> 文章</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/@3.7.1/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/@3.7.1/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/@3.7.1/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/@3.7.1/gallery/"><i class="fa-fw fas fa-camera-retro"></i><span> 相册</span></a></li><li><a class="site-page child" href="/@3.7.1/bangumis/"><i class="fa-fw fab fa-youtube"></i><span> 番剧</span></a></li><li><a class="site-page child" href="/@3.7.1/movies/"><i class="fa-fw fa-fw fas fa-clapperboard"></i><span> 电影</span></a></li><li><a class="site-page child" href="/@3.7.1/books/"><i class="fa-fw fas fa-book"></i><span> 书单</span></a></li><li><a class="site-page child" href="/@3.7.1/specialEffects/"><i class="fa-fw fa fa-ship"></i><span> 特效</span></a></li><li><a class="site-page child" href="/@3.7.1/wallpaper/"><i class="fa-fw fa-fw fas fa-images"></i><span> 壁纸</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/@3.7.1/sponsorWall/"><i class="fa-fw fa-fw fas fa-money-check-alt"></i><span> 赞助墙</span></a></div><div class="menus_item"><a class="site-page" href="/@3.7.1/comments/"><i class="fa-fw fas fa-comments"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/@3.7.1/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/@3.7.1/frdcenter/"><i class="fa-fw fa-fw fas fa-fish-fins"></i><span> 朋友圈</span></a></div><div class="menus_item"><a class="site-page" href="/@3.7.1/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fas fa-coffee"></i><span> 其他</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/@3.7.1/demandWall/"><i class="fa-fw fa fa-bug"></i><span> 需求墙</span></a></li><li><a class="site-page child" href="/@3.7.1/nav.html"><i class="fa-fw fa-fw fas fa-infinity"></i><span> 网址收藏</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">基于 Hexo 从零开始搭建个人博客（六）</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-06-05T05:50:17.000Z" title="发表于 2022-06-05 13:50:17">2022-06-05</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-06-27T14:39:00.817Z" title="更新于 2023-06-27 22:39:00">2023-06-27</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/@3.7.1/categories/Butterfly/">Butterfly</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">12.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>55分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="基于 Hexo 从零开始搭建个人博客（六）"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><blockquote>
<p>阅读本篇前，请先阅读前几篇文章：<br><a href="https://fe32.top/articles/hexo1601/">基于 Hexo 从零开始搭建个人博客（一）</a><br><a href="https://fe32.top/articles/hexo1602/">基于 Hexo 从零开始搭建个人博客（二）</a><br><a href="https://fe32.top/articles/hexo1603/">基于 Hexo 从零开始搭建个人博客（三）</a><br><a href="https://fe32.top/articles/hexo1604/">基于 Hexo 从零开始搭建个人博客（四）</a><br><a href="https://fe32.top/articles/hexo1605/">基于 Hexo 从零开始搭建个人博客（五）</a></p>
</blockquote>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><blockquote>
<p>本站基于<code>Hexo</code>搭建，用的 🦋 <a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly.git">hexo-theme-butterfly</a> 主题 <a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly/releases/tag/3.7.1">v3.7.1</a>，请注意最新的🦋 <a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly.git">hexo-theme-butterfly</a> 版本已经更新到 <a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly/releases/tag/4.3.0">v4.3.0</a> 。<br><br>如果你是 <a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly/releases/tag/3.7.1">v3.7.1</a> 之外的版本，可能有些地方会有出入，请留意。</p>
</blockquote>
<blockquote>
<p>注意：我的博客根目录路径为 【G:/hexo-blog/blog-demo】，下文所说的根目录都是此路径，将用<code>[BlogRoot]</code>代替。如果不清楚根目录路径，请回到教程 <a href="https://fe32.top/articles/hexo1602/">基于 Hexo 从零开始搭建个人博客（二）</a>，查看你执行<code>hexo init xxx</code>这条命令时所选择的路径，例如我选择的路径是【G:/hexo-blog】，我的博客根目录即为【G:/hexo-blog/xxx】。<br><br>修改站点配置文件<code>_config.yml</code>，路径为【BlogRoot/_config.yml】。<br><br>修改主题配置文件<code>_config.butterfly.yml</code>，路径为【BlogRoot/_config.butterfly.yml】。</p>
</blockquote>
<h2 id="更新记录"><a href="#更新记录" class="headerlink" title="更新记录"></a>更新记录</h2><div class="timeline">

<div class="timenode"><div class="meta"><p></p><p>2023-02-14</p>
<p></p></div><div class="body"><ol><li><a href="https://fe32.top/articles/hexo1606/#添加豆瓣插件" target="_top">更新【豆瓣插件】</a></li></ol></div></div>

<div class="timenode"><div class="meta"><p></p><p>2023-01-13</p>
<p></p></div><div class="body"><ol><li><a href="https://fe32.top/articles/hexo1606/#自定义页脚" target="_top">新增【自定义页脚】原版教程</a></li><li><a href="https://fe32.top/articles/hexo1606/#侧边栏公众号" target="_top">新增【侧边栏公众号】原版教程</a></li><li><a href="https://fe32.top/articles/hexo1606/#文章加密插件" target="_top">新增【文章加密插件】</a></li><li><a href="https://fe32.top/articles/hexo1606/#友链朋友圈" target="_top">新增【友链朋友圈】</a></li></ol></div></div>

<div class="timenode"><div class="meta"><p></p><p>2022-11-12</p>
<p></p></div><div class="body"><ol><li><a href="https://fe32.top/articles/hexo1606/#哔哩哔哩番剧页面插件" target="_top">更新关于【哔哩哔哩番剧页面插件】跟主题懒加载冲突的问题</a></li><li><a href="https://fe32.top/articles/hexo1606/#公告栏两个小人" target="_top">更新【公告栏两个小人】CDN（fastly.jsdelivr.net -&gt; elemecdn）</a></li></ol></div></div>

<div class="timenode"><div class="meta"><p></p><p>2022-11-12</p>
<p></p></div><div class="body"><ol><li><a href="https://fe32.top/articles/hexo1606/#侧边栏电子时钟" target="_top">更新【侧边栏电子时钟】教程</a></li></ol></div></div>

<div class="timenode"><div class="meta"><p></p><p>2022-11-10</p>
<p></p></div><div class="body"><ol><li><a href="https://fe32.top/articles/hexo1606/#首页分类磁铁" target="_top">新增【分类磁铁】原版教程</a></li><li><a href="https://fe32.top/articles/hexo1606/#自定义右键菜单" target="_top">新增【自定义右键菜单】教程</a></li><li><a href="https://fe32.top/articles/hexo1606/#加载动画" target="_top">新增【加载动画】教程</a></li><li><a href="https://fe32.top/articles/hexo1606/#评论弹幕" target="_top">新增【评论弹幕】教程</a></li><li><a href="https://fe32.top/articles/hexo1606/#更换字体" target="_top">修改【字体CDN】</a></li><li><a href="https://fe32.top/articles/hexo1606/#禁止右键及F12等事件" target="_top">更新【禁止右键及F12等事件】</a></li></ol></div></div>

<div class="timenode"><div class="meta"><p></p><p>2022-06-05 持续优化</p>
<p></p></div><div class="body"><ol><li><a href="https://fe32.top/articles/hexo1606/#公告栏两个小人" target="_top">公告栏两个小人</a></li><li><a href="https://fe32.top/articles/hexo1606/#星空背景和流星特效" target="_top">星空背景和流星特效</a></li></ol></div></div>

<div class="timenode"><div class="meta"><p></p><p>2022-05-29 CDN替换方案</p>
<p></p></div><div class="body"><ol><li>CDN解决方案：请参考<a href="https://fe32.top/articles/hexo1605/#CDN">基于 Hexo 从零开始搭建个人博客（五）</a></li></ol></div></div>

<div class="timenode"><div class="meta"><p></p><p>2021-11-27 valine获取评论失败</p>
<p></p></div><div class="body"><ol><li><a href="https://fe32.top/articles/hexo1606/#valine获取评论失败" target="_top">新增【valine获取评论失败说明】</a></li></ol></div></div>

<div class="timenode"><div class="meta"><p></p><p>2021-11-22 持续优化</p>
<p></p></div><div class="body"><ol><li><a href="https://fe32.top/articles/hexo1606/#禁止右键及F12等事件" target="_top">新增【禁止右键及F12等事件】说明</a></li><li><a href="https://fe32.top/articles/hexo1606/#部分动效说明" target="_top">新增【部分动效说明】</a></li><li><a href="https://fe32.top/articles/hexo1606/#部分页面插入视频" target="_top">新增【部分页面插入视频】</a></li></ol></div></div>

<div class="timenode"><div class="meta"><p></p><p>2021-08-26 持续优化</p>
<p></p></div><div class="body"><ol><li><a href="https://fe32.top/articles/hexo1606/#首页分类磁铁" target="_top">新增【首页分类磁铁】</a></li><li><a href="https://fe32.top/articles/hexo1606/#侧边栏电子时钟" target="_top">新增【侧边栏电子时钟】</a></li><li><a href="https://fe32.top/articles/hexo1606/#更换字体" target="_top">更换字体</a></li><li><a href="https://fe32.top/articles/hexo1606/#局部css优化" target="_top">对局部css进行了优化</a></li><li><a href="https://fe32.top/articles/hexo1606/#灯笼特效" target="_top">灯笼特效</a></li></ol></div></div>
<div class="timenode"><div class="meta"><p></p><p>2021-04-27 <a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly/releases/tag/3.7.1">butterfly3.4.0 -&gt; butterfly3.7.1</a></p>
<p></p></div><div class="body"><ol><li>更新v3.7.1适配方案。</li><li>注意一点的是，butterfly_v3.6.0取消了缓存配置，转为完全默认，需要将<code>{cache:theme.fragment_cache}</code> 改为 <code>{ cache:true }</code>。如果安装的版本较新，可直接忽略这一步。</li></ol></div></div>
</div>

<h2 id="Butterfly主题美化"><a href="#Butterfly主题美化" class="headerlink" title="Butterfly主题美化"></a>Butterfly主题美化</h2><h3 id="生成文章唯一链接"><a href="#生成文章唯一链接" class="headerlink" title="生成文章唯一链接"></a>生成文章唯一链接</h3><p>Hexo的默认文章链接格式是年，月，日，标题这种格式来生成的。如果你的标题是中文的话，那你的URL链接就会包含中文。</p>
<figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">permalink:</span> <span class="string">:year/:month/:day/:title</span></span><br></pre></td></tr></tbody></table></figure>

<ol>
<li>前往你的Hexo博客根目录，打开cmd命令窗口执行<code>npm install hexo-abbrlink --save</code>。<figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">npm install hexo-abbrlink --save</span><br></pre></td></tr></tbody></table></figure></li>
<li>修改站点配置文件<code>_config.yml</code>中<code>permalink</code>属性。<figure class="highlight diff"><table><tbody><tr><td class="code"><pre><span class="line"><span class="deletion">- permalink: :year/:month/:day/:title/</span></span><br><span class="line">#修改为</span><br><span class="line">permalink: post/:abbrlink.html # post为自定义前缀</span><br><span class="line">abbrlink:</span><br><span class="line">  alg: crc32   #算法： crc16(default) and crc32</span><br><span class="line">  rep: hex     #进制： dec(default) and hex</span><br></pre></td></tr></tbody></table></figure>

</li>
</ol>
<h3 id="页面底部-footer-跳动的心"><a href="#页面底部-footer-跳动的心" class="headerlink" title="页面底部 footer 跳动的心"></a>页面底部 footer 跳动的心</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/1f4f6f6e7a7fb.jpg"></div></div>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <p>编辑<code>BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/footer.pug</code>文件，</p><p>将以下内容</p><figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">&amp;copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}</span><br></pre></td></tr></tbody></table></figure><p>改为</p><figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">&amp;copy;${theme.footer.owner.since} - ${nowYear + ' '} &lt;i id="heartbeat" class="fa fas fa-heartbeat"&gt;&lt;/i&gt; ${config.author}</span><br></pre></td></tr></tbody></table></figure><p>将以下内容</p><figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">&amp;copy;${nowYear} By ${config.author} </span><br></pre></td></tr></tbody></table></figure><p>改为</p><figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">&amp;copy;${nowYear + ' '} &lt;i id="heartbeat" class="fa fas fa-heartbeat"&gt;&lt;/i&gt; ${config.author}</span><br></pre></td></tr></tbody></table></figure><p>将以下内容添加到 <code>&lt;head&gt;&lt;/head&gt;</code>标签内：</p><figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="string">&lt;link</span> <span class="string">rel="stylesheet"</span> <span class="string">href="https://fastly.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css"&gt;</span></span><br></pre></td></tr></tbody></table></figure><p>具体放置位置，可以参考下图：</p><div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/06/05/629c7d29468ce.jpg"></div></div>
              </div>
            </details>

<h3 id="修改标题样式"><a href="#修改标题样式" class="headerlink" title="修改标题样式"></a>修改标题样式</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/07/19/62d6b17d2c3c5.jpg" alt="回形针"></div><span class="image-caption">回形针</span></div><div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/07/19/62d6b7fda1799.jpg" alt="旋转风车"></div><span class="image-caption">旋转风车</span></div>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <p>在<code>BlogRoot/node_modules/hexo-theme-butterfly/source/css</code>文件下新建 css 文件，并命名为 <code>custom.css</code>(命名按照自己喜好去命名，只需在主题配置文件<code>_config.butterfly.yml</code>中引入对应的<code>css</code>文件即可)，将以下代码复制到新建的<code>custom.css</code>中。</p><p>如果想自行修改标题样式的话，将<code>content: '\f0c1';</code>中的内容换成自己想要的即可，如要添加动画，参考<code>animation: avatar_turn_around 1s linear infinite;</code>。</p><figure class="highlight css"><table><tbody><tr><td class="code"><pre><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h1</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h2</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h3</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h4</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h5</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h6</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-id">#post</span> <span class="selector-class">.post-outdate-notice</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-class">.fontawesomeIcon</span>,</span><br><span class="line"><span class="selector-class">.note</span><span class="selector-pseudo">:not(.no-icon)</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-tag">hr</span><span class="selector-pseudo">:before</span> {</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">    <span class="attribute">font-weight</span>: <span class="number">600</span>;</span><br><span class="line">    <span class="attribute">font-style</span>: normal;</span><br><span class="line">    <span class="attribute">font-variant</span>: normal;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">'Font Awesome 5 Free'</span>;</span><br><span class="line">    <span class="attribute">text-rendering</span>: auto;</span><br><span class="line">    <span class="attribute">-webkit-font-smoothing</span>: antialiased</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h1</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h2</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h3</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h4</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h5</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h6</span><span class="selector-pseudo">:before</span> {</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#f47466</span>;</span><br><span class="line">    <span class="comment">/* 回形针 */</span></span><br><span class="line">    <span class="attribute">content</span>: <span class="string">'\f0c1'</span>;  </span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line">    <span class="attribute">-webkit-transition</span>: all .<span class="number">2s</span> ease-out;</span><br><span class="line">    <span class="attribute">-moz-transition</span>: all .<span class="number">2s</span> ease-out;</span><br><span class="line">    <span class="attribute">-o-transition</span>: all .<span class="number">2s</span> ease-out;</span><br><span class="line">    <span class="attribute">-ms-transition</span>: all .<span class="number">2s</span> ease-out;</span><br><span class="line">    <span class="attribute">transition</span>: all .<span class="number">2s</span> ease-out;</span><br><span class="line">    <span class="comment">/* 若要使用风车效果，请去掉下面的注释 */</span></span><br><span class="line">    <span class="comment">/* content: '\f863'; </span></span><br><span class="line"><span class="comment">    animation: avatar_turn_around 1s linear infinite; */</span></span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h1</span> {</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">1.4rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h1</span> <span class="selector-tag">code</span> {</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">1rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h1</span><span class="selector-pseudo">:before</span> {</span><br><span class="line">    <span class="attribute">margin-left</span>: -<span class="number">1.3rem</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="built_in">calc</span>(<span class="number">50%</span> - .<span class="number">5rem</span>);</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">1rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h1</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">1.6rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h2</span> {</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">1.3rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h2</span> <span class="selector-tag">code</span> {</span><br><span class="line">    <span class="attribute">font-size</span>: .<span class="number">9rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h2</span><span class="selector-pseudo">:before</span> {</span><br><span class="line">    <span class="attribute">margin-left</span>: -<span class="number">1.4rem</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="built_in">calc</span>(<span class="number">50%</span> - .<span class="number">45rem</span>);</span><br><span class="line">    <span class="attribute">font-size</span>: .<span class="number">9rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h2</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">1.5rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h3</span> {</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">1.2rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h3</span> <span class="selector-tag">code</span> {</span><br><span class="line">    <span class="attribute">font-size</span>: .<span class="number">8rem</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="built_in">calc</span>(<span class="number">50%</span> - .<span class="number">4rem</span>);</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h3</span><span class="selector-pseudo">:before</span> {</span><br><span class="line">    <span class="attribute">margin-left</span>: -<span class="number">1.2rem</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="built_in">calc</span>(<span class="number">50%</span> - .<span class="number">4rem</span>);</span><br><span class="line">    <span class="attribute">font-size</span>: .<span class="number">8rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h3</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">1.4rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h4</span> {</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">1.1rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h4</span> <span class="selector-tag">code</span> {</span><br><span class="line">    <span class="attribute">font-size</span>: .<span class="number">7rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h4</span><span class="selector-pseudo">:before</span> {</span><br><span class="line">    <span class="attribute">margin-left</span>: -<span class="number">1rem</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="built_in">calc</span>(<span class="number">50%</span> - .<span class="number">35rem</span>);</span><br><span class="line">    <span class="attribute">font-size</span>: .<span class="number">7rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h4</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">1.3rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h5</span> {</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">1rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h5</span> <span class="selector-tag">code</span> {</span><br><span class="line">    <span class="attribute">font-size</span>: .<span class="number">6rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h5</span><span class="selector-pseudo">:before</span> {</span><br><span class="line">    <span class="attribute">margin-left</span>: -.<span class="number">8rem</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="built_in">calc</span>(<span class="number">50%</span> - .<span class="number">3rem</span>);</span><br><span class="line">    <span class="attribute">font-size</span>: .<span class="number">6rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h5</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">1.2rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h6</span> {</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">1rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h6</span> <span class="selector-tag">code</span> {</span><br><span class="line">    <span class="attribute">font-size</span>: .<span class="number">6rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h6</span><span class="selector-pseudo">:before</span> {</span><br><span class="line">    <span class="attribute">margin-left</span>: -.<span class="number">8rem</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="built_in">calc</span>(<span class="number">50%</span> - .<span class="number">3rem</span>);</span><br><span class="line">    <span class="attribute">font-size</span>: .<span class="number">6rem</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">h6</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">1.2rem</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
              </div>
            </details>

<h3 id="添加豆瓣插件"><a href="#添加豆瓣插件" class="headerlink" title="添加豆瓣插件"></a>添加豆瓣插件</h3><!-- 详情请看[传送门](https://github.com/mythsman/hexo-douban) -->

<blockquote>
<p>如果出现了豆瓣爬取数据失败问题，建议安装较低的node版本(v12.18.0)。</p>
</blockquote>
<div class="tabs" id=""><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#-1">1.安装豆瓣插件</button></li><li class="tab"><button type="button" data-href="#-2">2.注入豆瓣内容</button></li><li class="tab"><button type="button" data-href="#-3">3.主题中注入豆瓣</button></li><li class="tab"><button type="button" data-href="#-4">4.执行Docs命令</button></li><li class="tab"><button type="button" data-href="#-5">5.添加相关导航</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="-1"><p>前往博客根目录，打开cmd命令窗口执行<code>npm install hexo-douban --save</code>。</p>
<figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">npm install hexo-douban --save</span><br></pre></td></tr></tbody></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="-2"><p>修改站点配置文件<code>_config.yml</code>，添加如下代码：</p>
<!-- douban:
#   user: ethan_tzy
#   builtin: false
#   book:
#     title: ''
#     quote: 'One who is filled with knowledge always behaves with elegance.'
#   movie:
#     title: '梦想与现实的碰撞'
#     quote: 'The collision between dream and reality.'
#   game:
#     title: '诅咒中闪烁泪光，倾诉霜之哀伤。'
#     quote: 'Tears flicker in the curse and pour out the sorrow of frost.'
#   timeout: 10000 -->
<figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">douban:</span></span><br><span class="line">  <span class="attr">id:</span> <span class="number">228172215</span></span><br><span class="line">  <span class="attr">builtin:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">item_per_page:</span> <span class="number">10</span></span><br><span class="line">  <span class="attr">book:</span></span><br><span class="line">    <span class="attr">path:</span> <span class="string">books/index.html</span></span><br><span class="line">    <span class="attr">title:</span> <span class="string">'This is my book title'</span></span><br><span class="line">    <span class="attr">quote:</span> <span class="string">'This is my book quote'</span></span><br><span class="line">    <span class="attr">option:</span></span><br><span class="line">  <span class="attr">movie:</span></span><br><span class="line">    <span class="attr">path:</span> <span class="string">movies/index.html</span></span><br><span class="line">    <span class="attr">title:</span> <span class="string">'This is my movie title'</span></span><br><span class="line">    <span class="attr">quote:</span> <span class="string">'This is my movie quote'</span></span><br><span class="line">    <span class="attr">option:</span></span><br><span class="line">  <span class="attr">game:</span></span><br><span class="line">    <span class="attr">path:</span> <span class="string">games/index.html</span></span><br><span class="line">    <span class="attr">title:</span> <span class="string">'This is my game title'</span></span><br><span class="line">    <span class="attr">quote:</span> <span class="string">'This is my game quote'</span></span><br><span class="line">    <span class="attr">option:</span></span><br><span class="line">  <span class="attr">song:</span></span><br><span class="line">    <span class="attr">path:</span> <span class="string">songs/index.html</span></span><br><span class="line">    <span class="attr">title:</span> <span class="string">'This is my song title'</span></span><br><span class="line">    <span class="attr">quote:</span> <span class="string">'This is my song quote'</span></span><br><span class="line">    <span class="attr">option:</span></span><br><span class="line">  <span class="attr">timeout:</span> <span class="number">10000</span> </span><br></pre></td></tr></tbody></table></figure>
<ul>
<li>id: 你的豆瓣ID(纯数字格式，不是自定义的域名)。获取方法可以参考 <a target="_blank" rel="noopener" href="https://www.zhihu.com/question/19634899">怎样获取豆瓣的数字 ID</a> ？</li>
<li>builtin: 是否将 hexo douban 命令默认嵌入进 hexo g、hexo s，使其自动执行 hexo douban 命令。默认关闭。当你的豆瓣条目较多时，也建议关闭。</li>
<li>item_per_page: 每页展示的条目数，默认 10 。</li>
<li>path: 生成页面后的路径，默认生成在 //my-blog/books/index.html 等下面。如需自定义路径，则可以修改这里。</li>
<li>title: 该页面的标题。</li>
<li>quote: 写在页面开头的一段话,支持 html 语法。</li>
<li>option: 该页面额外的 Front-matter 配置，参考 <a target="_blank" rel="noopener" href="https://hexo.io/docs/front-matter.html">Hexo 文档</a>。无特别需要，留空即可。</li>
<li>timeout: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。</li>
</ul>
<!-- - user: 你的豆瓣ID。打开豆瓣，登入账户，然后在右上角点击 ”个人主页“，这时候地址栏的URL大概是这样：https://www.douban.com/people/xxxxxx/ ，其中的”xxxxxx”就是你的个人ID了。
- builtin: 是否将生成页面的功能嵌入 hexo s 和 hexo g 中，默认是 false ，另一可选项为 true 。
- title: 该页面的标题。
- quote: 写在页面开头的一段话,支持html语法。
- timeout: 爬取数据的超时时间，默认是 10000ms，如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。
- 如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。 --><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="-3"><p>在主题配置文件<code>_config.butterfly.yml</code>中配置以下内容：</p>
<figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment"># 如果你有使用hexo-douban，可配置這個</span></span><br><span class="line"><span class="attr">douban:</span></span><br><span class="line">   <span class="attr">meta:</span> <span class="literal">true</span></span><br><span class="line">   <span class="attr">movies_img:</span> <span class="string">https://fastly.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/movie.jpg</span></span><br><span class="line">   <span class="attr">books_img:</span> <span class="string">https://fastly.jsdelivr.net/npm/blog-gallery@1.0.0/1/20200206161657.webp</span></span><br><span class="line"><span class="comment">#   games_img:</span></span><br></pre></td></tr></tbody></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="-4"><p>前往博客根目录，打开cmd命令窗口执行<code>hexo douban</code>。</p>
<figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">hexo douban</span><br></pre></td></tr></tbody></table></figure>
<p>等待命令执行完毕，出现下图所示内容即为成功。</p>
<div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/d579a68e2fd94.jpg"></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="-5"><div class="note red icon modern"><i class="note-icon fas fa-fan"></i><p>请注意，我的butterfly主题版本不是最新的，导航菜单栏格式请按照最新的格式写。</p>
</div>

<p>如下图：</p>
<div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/badbd5bb7f80f.jpg"></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<h3 id="添加访客地图"><a href="#添加访客地图" class="headerlink" title="添加访客地图"></a>添加访客地图</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/e391380d7db28.jpg"></div></div>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <p>前往 <a target="_blank" rel="noopener" href="https://clustrmaps.com/">clustrmaps</a> 网站注册一个帐号。</p><p>找到<code>Free Tools</code>下面的<code>Website Widget</code>, 点击<code>Get Map Widget</code>。</p><p>输入你的博客网址，点击<code>Next</code>。</p><p>根据你自己的喜好选择样式<code>Map widget</code>或<code>Globe Widget</code>（本人使用后者）。</p><p>找到如下代码，记住 src (<strong>**</strong> 的部分):</p><figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span> id=<span class="string">"clstr_globe"</span> src=<span class="string">"**********************"</span>&gt;</span><br></pre></td></tr></tbody></table></figure><p>在 <code>BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/widget</code>文件夹新建<code>card_map.pug</code>文件，文件内容如下：</p><figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">.card-widget.card-map</span><br><span class="line">  .card-content</span><br><span class="line">    .item-headline</span><br><span class="line">      i.fa.fa-globe-asia(aria-hidden="true")</span><br><span class="line">      span= _p('aside.card_map')</span><br><span class="line">    script#clstr_globe(type="text/javascript" defer="defer" src="此处填入你自己的代码")</span><br></pre></td></tr></tbody></table></figure><p>编辑 <code>BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/widget/index.pug</code>文件，在你想要显示的位置插入以下代码（注意格式）：</p><figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">if theme.aside.card_map</span><br><span class="line">        !=partial('includes/widget/card_map', {}, {cache:true})</span><br></pre></td></tr></tbody></table></figure><p>具体放置位置，可以参考下图：</p><div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/06/05/629c845643925.jpg"></div></div><p>编辑主题配置文件<code>_config.butterfly.yml</code>，在<code>card_webinfo</code>下面添加一行<code>card_map: true</code>。</p><p>编辑<code>BlogRoot/node_modules/hexo-theme-butterfly/languages/zh-CN.yml</code>文件 (请根据你的网站语言选择)，找到<code>card_announcement: 公告</code> , 在下面添加一行<code>card_map: 访客地图</code> (后面的文本可自定义),繁体字方法一样，修改<code>BlogRoot/node_modules/hexo-theme-butterfly/languages/zh-TW.yml</code>文件就行。</p><p>如果不想显示，直接把主题配置文件<code>_config.butterfly.yml</code>中的<code>card_map: true</code> 改为 <code>card_map: false</code> 即可。</p>
              </div>
            </details>

<h3 id="添加Pixiv日榜"><a href="#添加Pixiv日榜" class="headerlink" title="添加Pixiv日榜"></a>添加Pixiv日榜</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/b17aa37e6baa5.jpg"></div></div>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <ol><li><p>在<code>BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/widget</code>文件夹新建 <code>card_pixiv.pug</code>文件，文件内容如下：</p><figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">.card-widget.card-pixiv</span><br><span class="line"> .card-content</span><br><span class="line">  .item-headline</span><br><span class="line">    i.fa.fa-image(aria-hidden="true")</span><br><span class="line">    span= _p('aside.card_pixiv')</span><br><span class="line">    iframe(src="https://cloud.mokeyjay.com/pixiv" frameborder="0"  style="width:99%;height:380px;margin:0;")</span><br></pre></td></tr></tbody></table></figure><p><a target="_blank" rel="noopener" href="https://cloud.mokeyjay.com/pixiv">https://cloud.mokeyjay.com/pixiv</a> 使用的是 <a target="_blank" rel="noopener" href="https://www.mokeyjay.com/">超能小紫</a> 提供的服务，也可以自行搭建，搭建方式请看<a target="_blank" rel="noopener" href="https://www.mokeyjay.com/archives/1063">这里</a>。</p></li><li><p>编辑<code>BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/widget/index.pug</code> 文件，在你想要显示的位置插入以下代码：</p><figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">if theme.aside.card_pixiv</span><br><span class="line">    !=partial('includes/widget/card_pixiv', {}, {cache:true})</span><br></pre></td></tr></tbody></table></figure><div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/06/05/629c85346ca23.jpg"></div></div></li><li><p>编辑主题配置文件<code>_config.butterfly.yml</code>，在 <code>card_webinfo</code> 下面添加一行 <code>card_pixiv: true</code>，可以通过搜索关键词 <code>aside</code>，找到对应位置添加即可。不想显示，直接把文件中的 <code>card_pixiv: true</code> 改为 <code>card_pixiv: false</code> 即可。</p></li><li><p>编辑 <code>BlogRoot/node_modules/hexo-theme-butterfly/languages/zh-CN.yml</code>文件 (请根据你的网站语言选择)，找到<code>card_announcement: 公告</code>，在下面添加一行<code>card_pixiv: Pixiv日榜Top50</code>(后面的文本可自定义)。</p></li></ol>
              </div>
            </details>

<h3 id="哔哩哔哩番剧页面插件"><a href="#哔哩哔哩番剧页面插件" class="headerlink" title="哔哩哔哩番剧页面插件"></a>哔哩哔哩番剧页面插件</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/f09072fc46848.jpg"></div></div>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <details red=""><summary> 关于图片加载相关问题 </summary>              <div class="content">              <p>懒加载问题，此插件懒加载可能与你主题的懒加载存在冲突，以下为几种解决方法：</p><p>1.全站关闭懒加载，此插件启用/不启用懒加载均可正常运行；<br>2.如果主题提供单独页面的懒加载配置参数，可在插件配置的extra_option中配置为关。<br>3.[建议]关闭此插件的懒加载，并按照主题的懒加载图片格式配置srcValue和lazyloadAttrName，例butterfly主题：</p><figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">bangumi:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="string">...</span></span><br><span class="line">  <span class="attr">lazyload:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">srcValue:</span> <span class="string">'__image__'</span></span><br><span class="line">  <span class="string">...</span></span><br></pre></td></tr></tbody></table></figure><p>更多详情可见：<a target="_blank" rel="noopener" href="https://github.com/HCLonely/hexo-bilibili-bangumi/issues/134">关于图片加载相关问题</a></p>              </div>            </details><ol><li><p>安装依赖</p><figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">npm install hexo-bilibili-bangumi --save</span><br></pre></td></tr></tbody></table></figure></li><li><p>更新依赖库</p><figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">npm install hexo-bilibili-bangumi --update --save</span><br></pre></td></tr></tbody></table></figure></li><li><p>注入哔哩哔哩番剧<br>修改站点配置文件<code>_config.yml</code>，添加如下代码：</p><figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">bangumi:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> </span><br><span class="line">  <span class="attr">vmid:</span> <span class="number">321638084</span></span><br><span class="line">  <span class="attr">title:</span> <span class="string">'生命不息，追番不止。'</span></span><br><span class="line">  <span class="attr">quote:</span> <span class="string">'Where there is life, there is life.'</span></span><br><span class="line">  <span class="attr">show:</span> <span class="number">1</span></span><br><span class="line">  <span class="attr">loading:</span> <span class="string">'/img/bangumi-loading.gif'</span></span><br></pre></td></tr></tbody></table></figure><p> 配置说明：</p><ul><li>enable: 是否启用</li><li>vmid: 哔哩哔哩番剧页面的 vmid(uid), 如何获取？</li><li>title: 该页面的标题</li><li>quote: 写在页面开头的一段话，支持 html 语法</li><li>show: 初始显示页面：0: 想看 , 1: 在看 , 2: 看过，默认为 1</li><li>loading: 图片加载完成前的 loading 图片</li></ul></li><li><p>执行Docs命令<br>前往博客根目录，打开cmd命令窗口执行<code>hexo new page bangumis</code>。</p><figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">hexo new page bangumis</span><br></pre></td></tr></tbody></table></figure><p>找到 <code>BlogRoot/source/bangumis/index.md</code> 这个文件，修改这个文件，添加 <code>type: "bangumis"</code>。</p><figure class="highlight markdown"><table><tbody><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: bangumis</span><br><span class="line">date: 2020-12-14 14:43:39</span><br><span class="line">type: "bangumis"</span><br><span class="line">---</span><br></pre></td></tr></tbody></table></figure><p>防止请求次数过多插件不再自动获取番剧数据，所以请根据自己的需要在<code>hexo generate</code>或<code>hexo deploy</code>之前使用<code>hexo bangumi -u</code>命令更新番剧数据。<br>删除数据命令: <code>hexo bangumi -d</code></p></li><li><p>获取 uid<br>登录哔哩哔哩后前往 <a target="_blank" rel="noopener" href="https://space.bilibili.com/">https://space.bilibili.com/xxx</a>，网址最后的一串数字就是 uid。</p></li></ol>
              </div>
            </details>

<h3 id="添加卡通人物（看板娘）"><a href="#添加卡通人物（看板娘）" class="headerlink" title="添加卡通人物（看板娘）"></a>添加卡通人物（看板娘）</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/06/05/629cbe6848d9a.jpg"></div></div>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <p>前往博客根目录，打开cmd命令窗口执行<code>npm install --save hexo-helper-live2d</code>。</p><figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">npm install --save hexo-helper-live2d</span><br></pre></td></tr></tbody></table></figure><p>输入以下命令，下载相应的模型， 替换成你想要的模型名称即可，更多模型选择<a target="_blank" rel="noopener" href="https://github.com/xiazeyu/live2d-widget-models">请点击此处</a>，各个模型的预览请访问<a target="_blank" rel="noopener" href="https://huaji8.top/post/live2d-plugin-2.0/">原作者</a></p><figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">npm install --save live2d-widget-model-shizuku</span><br></pre></td></tr></tbody></table></figure><p>修改站点配置文件<code>_config.yml</code>，添加如下代码：</p><figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">live2d:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">scriptFrom:</span> <span class="string">local</span> <span class="comment"># 默认</span></span><br><span class="line">  <span class="attr">tagMode:</span> <span class="literal">false</span> <span class="comment"># 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中</span></span><br><span class="line">  <span class="attr">debug:</span> <span class="literal">false</span> <span class="comment"># 调试, 是否在控制台输出日志</span></span><br><span class="line">  <span class="attr">model:</span></span><br><span class="line">    <span class="attr">use:</span> <span class="string">live2d-widget-model-shizuku</span>  <span class="comment">#模型选择</span></span><br><span class="line">  <span class="attr">display:</span></span><br><span class="line">    <span class="attr">position:</span> <span class="string">right</span>  <span class="comment">#模型位置</span></span><br><span class="line">    <span class="attr">width:</span> <span class="number">150</span>       <span class="comment">#模型宽度</span></span><br><span class="line">    <span class="attr">height:</span> <span class="number">300</span>      <span class="comment">#模型高度</span></span><br><span class="line">    <span class="attr">hOffset:</span> <span class="number">20</span></span><br><span class="line">    <span class="attr">vOffset:</span> <span class="number">-20</span></span><br><span class="line">  <span class="attr">mobile:</span></span><br><span class="line">    <span class="attr">show:</span> <span class="literal">false</span>      <span class="comment">#是否在手机端显示</span></span><br></pre></td></tr></tbody></table></figure><p>重新编译运行，即可看到效果。</p>
              </div>
            </details>

<h3 id="添加全局吸底APlayer"><a href="#添加全局吸底APlayer" class="headerlink" title="添加全局吸底APlayer"></a>添加全局吸底APlayer</h3><blockquote>
<p>参考链接：<a target="_blank" rel="noopener" href="https://butterfly.js.org/posts/507c070f/">Butterfly添加全局吸底Aplayer教程</a><br>此步骤适用于安装了<code>hexo-tag-aplayer</code>插件的人</p>
</blockquote>
<details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/886d62deceb24.jpg"></div></div>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <ol><li><p>前往博客根目录，打开cmd命令窗口执行以下命令：</p><figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">npm i hexo-tag-aplayer --save</span><br></pre></td></tr></tbody></table></figure></li><li><p>关闭<code>asset_inject</code><br>由于需要全局都插入 aplayer 和 meting 资源，为了防止插入重复的资源，需要把 asset_inject 设为<code>false</code>。<br>修改站点配置文件<code>_config.yml</code>，配置以下内容：</p><figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">aplayer:</span></span><br><span class="line">  <span class="attr">meting:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">asset_inject:</span> <span class="literal">false</span></span><br></pre></td></tr></tbody></table></figure></li><li><p>开启主题的aplayerInject<br>修改主题配置文件<code>_config.butterfly.yml</code>，将<code>enable</code>设为<code>true</code>和<code>per_page</code>设为<code>true</code>。</p><figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment"># Inject the css and script (aplayer/meting)</span></span><br><span class="line"><span class="attr">aplayerInject:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="literal">true</span></span><br></pre></td></tr></tbody></table></figure></li><li><p>插入Aplayer html<br>为了适配<code>hexo-tag-aplayer</code>，主题内置的<code>Meting js</code>仍为1.2版本，并非最新的2.x版本。<br>Aplayer html 例子（示例中没有显示歌词）：</p><figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"aplayer no-destroy"</span> <span class="attr">data-id</span>=<span class="string">"7427714271"</span> <span class="attr">data-server</span>=<span class="string">"netease"</span> <span class="attr">data-type</span>=<span class="string">"playlist"</span> <span class="attr">data-fixed</span>=<span class="string">"true"</span> <span class="attr">data-mini</span>=<span class="string">"true"</span> <span class="attr">data-listFolded</span>=<span class="string">"false"</span> <span class="attr">data-order</span>=<span class="string">"random"</span> <span class="attr">data-lrctype</span>=<span class="string">"1"</span> <span class="attr">data-preload</span>=<span class="string">"none"</span> <span class="attr">data-autoplay</span>=<span class="string">"true"</span> <span class="attr">muted</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure><p>参数解释如下表：</p><table><thead><tr><th align="left">option</th><th align="left">default</th><th align="left">description</th></tr></thead><tbody><tr><td align="left">data-id</td><td align="left">require</td><td align="left">song id / playlist id / album id / search keyword</td></tr><tr><td align="left">data-server</td><td align="left">require</td><td align="left">music platform: netease, tencent, kugou, xiami, baidu</td></tr><tr><td align="left">data-type</td><td align="left">require</td><td align="left">song, playlist, album, search, artist</td></tr><tr><td align="left">data-fixed</td><td align="left">false</td><td align="left">enable fixed mode</td></tr><tr><td align="left">data-mini</td><td align="left">false</td><td align="left">enable mini mode</td></tr><tr><td align="left">data-autoplay</td><td align="left">false</td><td align="left">audio autoplay</td></tr><tr><td align="left">data-theme</td><td align="left">#2980b9</td><td align="left">main color</td></tr><tr><td align="left">data-loop</td><td align="left">all</td><td align="left">player loop play, values: ‘all’, ‘one’, ‘none’</td></tr><tr><td align="left">data-order</td><td align="left">list</td><td align="left">player play order, values: ‘list’, ‘random’</td></tr><tr><td align="left">data-preload</td><td align="left">auto</td><td align="left">values: ‘none’, ‘metadata’, ‘auto’</td></tr><tr><td align="left">data-volume</td><td align="left">0.7</td><td align="left">default volume, notice that player will remember user setting, default volume will not work after user set volume themselves</td></tr><tr><td align="left">data-mutex</td><td align="left">true</td><td align="left">prevent to play multiple player at the same time, pause other players when this player start play</td></tr><tr><td align="left">data-lrctype</td><td align="left">0</td><td align="left">lyric type</td></tr><tr><td align="left">data-listfolded</td><td align="left">false</td><td align="left">indicate whether list should folded at first</td></tr><tr><td align="left">data-listmaxheight</td><td align="left">340px</td><td align="left">list max height</td></tr><tr><td align="left">data-storagename</td><td align="left">metingjs</td><td align="left">localStorage key that store player setting</td></tr></tbody></table><div class="note info flat"><p><code>require</code>代表着这些参数是必须要使用的，其它的参数则可以根据自己需要配置。<br>配置全局吸底，<code>data-fixed</code>和<code>data-mini</code>也必须配置，配置为<code>true</code>。<br>如果使用Pjax，则在class里需添加<code>no-destroy</code>，这样防止切换页面时Aplayer被销毁。</p></div>将以下代码插入到主题配置文件（_config.butterfly.yml）的 “inject.bottom” 中<figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line">  <span class="attr">head:</span></span><br><span class="line">  <span class="attr">bottom:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;div</span> <span class="string">class="aplayer</span> <span class="literal">no</span><span class="string">-destroy"</span> <span class="string">data-id="7427714271"</span> <span class="string">data-server="netease"</span> <span class="string">data-type="playlist"</span> <span class="string">data-fixed="true"</span> <span class="string">data-mini="true"</span> <span class="string">data-listFolded="false"</span> <span class="string">data-order="random"</span> <span class="string">data-lrctype="1"</span> <span class="string">data-preload="none"</span> <span class="string">data-autoplay="true"</span> <span class="string">muted&gt;&lt;/div&gt;</span></span><br></pre></td></tr></tbody></table></figure>运行Hexo就可以看到网页左下角出现了Aplayer。最后，如果你想切换页面时，音乐不会中断。请把主题配置文件的 “pjax” 设为 “true” 。<figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">pjax:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">exclude:</span></span><br></pre></td></tr></tbody></table></figure></li><li><p>UI 调整</p><ul><li>向上调整<figure class="highlight css"><table><tbody><tr><td class="code"><pre><span class="line"><span class="selector-id">#toggle-sidebar</span> {</span><br><span class="line">    <span class="attribute">bottom</span>: <span class="number">80px</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure><div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/26dde2aeaa502.gif"></div></div>修改主题配置文件`_config.butterfly.yml`，将代码添加到 “inject.head” 中。<figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line">    <span class="attr">head:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">'&lt;style type="text/css"&gt;#toggle-sidebar {bottom: 80px}&lt;/style&gt;'</span></span><br></pre></td></tr></tbody></table></figure></li><li>向右调整<figure class="highlight css"><table><tbody><tr><td class="code"><pre><span class="line"><span class="selector-id">#toggle-sidebar</span> {</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">100px</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure><div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/5ef1e1245fc5a.gif"></div></div>修改主题配置文件（_config.butterfly.yml），将代码添加到 “inject.head” 中。<figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line">    <span class="attr">head:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">'&lt;style type="text/css"&gt;#toggle-sidebar {left:100px}&lt;/style&gt;'</span></span><br></pre></td></tr></tbody></table></figure></li></ul></li></ol>
              </div>
            </details>

<h3 id="添加贡献日历"><a href="#添加贡献日历" class="headerlink" title="添加贡献日历"></a>添加贡献日历</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/4c1e9d34afcb9.jpg"></div></div>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <p>我的版本可能比较旧，贡献日历已经更新迭代了，所以直接参此教程：<a target="_blank" rel="noopener" href="https://akilar.top/posts/1f9c68c9/">Gitcalendar</a></p>
              </div>
            </details>

<h3 id="主页冒泡特效"><a href="#主页冒泡特效" class="headerlink" title="主页冒泡特效"></a>主页冒泡特效</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/38a0bd6cef409.jpg"></div></div>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <p>在<code>BlogRoot/node_modules/hexo-theme-butterfly/source/js</code>目录下创建一个<code>chocolate.js</code>文件。</p><p>具体位置，请看下图所示：</p><div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/03/05/13410b8cd419d.jpg"></div></div><p>直接复制导入如下代码：</p><figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> * @Author: tzy1997</span></span><br><span class="line"><span class="comment"> * @Date: 2020-12-15 20:55:25</span></span><br><span class="line"><span class="comment"> * @LastEditors: tzy1997</span></span><br><span class="line"><span class="comment"> * @LastEditTime: 2021-01-12 19:02:25</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">    <span class="comment">// 气泡</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">bubble</span>(<span class="params"></span>) </span>{</span><br><span class="line">        $(<span class="string">'#page-header'</span>).circleMagic({</span><br><span class="line">            radius: <span class="number">10</span>,</span><br><span class="line">            density: <span class="number">.2</span>,</span><br><span class="line">            color: <span class="string">'rgba(255,255,255,.4)'</span>,</span><br><span class="line">            clearOffset: <span class="number">0.99</span></span><br><span class="line">        });</span><br><span class="line">    }! <span class="function"><span class="keyword">function</span>(<span class="params">p</span>) </span>{</span><br><span class="line">        p.fn.circleMagic = <span class="function"><span class="keyword">function</span>(<span class="params">t</span>) </span>{</span><br><span class="line">            <span class="keyword">var</span> o, a, n, r, e = !<span class="number">0</span>,</span><br><span class="line">                i = [],</span><br><span class="line">                d = p.extend({ <span class="attr">color</span>: <span class="string">"rgba(255,0,0,.5)"</span>, <span class="attr">radius</span>: <span class="number">10</span>, <span class="attr">density</span>: <span class="number">.3</span>, <span class="attr">clearOffset</span>: <span class="number">.2</span> }, t),</span><br><span class="line">                l = <span class="built_in">this</span>[<span class="number">0</span>];</span><br><span class="line"></span><br><span class="line">            <span class="function"><span class="keyword">function</span> <span class="title">c</span>(<span class="params"></span>) </span>{ e = !(<span class="built_in">document</span>.body.scrollTop &gt; a) }</span><br><span class="line"></span><br><span class="line">            <span class="function"><span class="keyword">function</span> <span class="title">s</span>(<span class="params"></span>) </span>{ o = l.clientWidth, a = l.clientHeight, l.height = a <span class="string">"px"</span>, n.width = o, n.height = a }</span><br><span class="line"></span><br><span class="line">            <span class="function"><span class="keyword">function</span> <span class="title">h</span>(<span class="params"></span>) </span>{</span><br><span class="line">                <span class="keyword">if</span> (e)</span><br><span class="line">                    <span class="keyword">for</span> (<span class="keyword">var</span> t <span class="keyword">in</span> r.clearRect(<span class="number">0</span>, <span class="number">0</span>, o, a), i) i[t].draw();</span><br><span class="line">                requestAnimationFrame(h)</span><br><span class="line">            }</span><br><span class="line"></span><br><span class="line">            <span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>) </span>{</span><br><span class="line">                <span class="keyword">var</span> t = <span class="built_in">this</span>;</span><br><span class="line"></span><br><span class="line">                <span class="function"><span class="keyword">function</span> <span class="title">e</span>(<span class="params"></span>) </span>{ t.pos.x = <span class="built_in">Math</span>.random() * o, t.pos.y = a <span class="number">100</span> * <span class="built_in">Math</span>.random(), t.alpha = <span class="number">.1</span> <span class="built_in">Math</span>.random() * d.clearOffset, t.scale = <span class="number">.1</span> <span class="number">.3</span> * <span class="built_in">Math</span>.random(), t.speed = <span class="built_in">Math</span>.random(), <span class="string">"random"</span> === d.color ? t.color = <span class="string">"rgba("</span> <span class="built_in">Math</span>.floor(<span class="number">255</span> * <span class="built_in">Math</span>.random()) <span class="string">", "</span> <span class="built_in">Math</span>.floor(<span class="number">0</span> * <span class="built_in">Math</span>.random()) <span class="string">", "</span> <span class="built_in">Math</span>.floor(<span class="number">0</span> * <span class="built_in">Math</span>.random()) <span class="string">", "</span> <span class="built_in">Math</span>.random().toPrecision(<span class="number">2</span>) <span class="string">")"</span> : t.color = d.color }</span><br><span class="line">                t.pos = {}, e(), <span class="built_in">this</span>.draw = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ t.alpha &lt;= <span class="number">0</span> &amp;&amp; e(), t.pos.y -= t.speed, t.alpha -= <span class="number">5e-4</span>, r.beginPath(), r.arc(t.pos.x, t.pos.y, t.scale * d.radius, <span class="number">0</span>, <span class="number">2</span> * <span class="built_in">Math</span>.PI, !<span class="number">1</span>), r.fillStyle = t.color, r.fill(), r.closePath() }</span><br><span class="line">            }! <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">                o = l.offsetWidth, a = l.offsetHeight,</span><br><span class="line">                    <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">                        <span class="keyword">var</span> t = <span class="built_in">document</span>.createElement(<span class="string">"canvas"</span>);</span><br><span class="line">                        t.id = <span class="string">"canvas"</span>, t.style.top = <span class="number">0</span>, t.style.zIndex = <span class="number">0</span>, t.style.position = <span class="string">"absolute"</span>, l.appendChild(t), t.parentElement.style.overflow = <span class="string">"hidden"</span></span><br><span class="line">                    }(), (n = <span class="built_in">document</span>.getElementById(<span class="string">"canvas"</span>)).width = o, n.height = a, r = n.getContext(<span class="string">"2d"</span>);</span><br><span class="line">                <span class="keyword">for</span> (<span class="keyword">var</span> t = <span class="number">0</span>; t &lt; o * d.density; t++) {</span><br><span class="line">                    <span class="keyword">var</span> e = <span class="keyword">new</span> f;</span><br><span class="line">                    i.push(e)</span><br><span class="line">                }</span><br><span class="line">                h()</span><br><span class="line">            }(), <span class="built_in">window</span>.addEventListener(<span class="string">"scroll"</span>, c, !<span class="number">1</span>), <span class="built_in">window</span>.addEventListener(<span class="string">"resize"</span>, s, !<span class="number">1</span>)</span><br><span class="line">        }</span><br><span class="line">    }(jQuery);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 调用气泡方法</span></span><br><span class="line">    bubble();</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure><p>最后，在主题配置文件<code>_config.butterfly.yml</code>中，引入<code>jquery.min.js</code>和<code>chocolate.js</code>。</p><figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line">  <span class="attr">head:</span></span><br><span class="line">    <span class="comment"># - &lt;link rel="stylesheet" href="/xxx.css"&gt;</span></span><br><span class="line">  <span class="attr">bottom:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">defer</span> <span class="string">src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"&gt;&lt;/script&gt;</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">data-pjax</span> <span class="string">defer</span> <span class="string">src="https://npm.elemecdn.com/tzy-blog/lib/js/theme/chocolate.js"&gt;&lt;/script&gt;</span></span><br></pre></td></tr></tbody></table></figure><div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/06/05/629cc712293d1.jpg"></div></div>
              </div>
            </details>

<h3 id="鼠标样式"><a href="#鼠标样式" class="headerlink" title="鼠标样式"></a>鼠标样式</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/05/17/6283c365d20dd.png"></div></div>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <p>将以下代码复制到<code>custom.css</code>即可。</p><figure class="highlight css"><table><tbody><tr><td class="code"><pre><span class="line"><span class="selector-tag">body</span> {</span><br><span class="line">    <span class="attribute">cursor</span>: <span class="built_in">url</span>(https://bu.dusays.com/<span class="number">2022</span>/<span class="number">05</span>/<span class="number">17</span>/<span class="number">6283</span>c365d20dd.png), auto;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.hide-block</span>&gt;<span class="selector-class">.hide-button</span><span class="selector-class">.open</span>,</span><br><span class="line"><span class="selector-class">.hide-inline</span>&gt;<span class="selector-class">.hide-button</span><span class="selector-class">.open</span> {</span><br><span class="line">    <span class="attribute">display</span>: block</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">a</span>,</span><br><span class="line"><span class="selector-tag">button</span>,</span><br><span class="line"><span class="selector-tag">img</span> {</span><br><span class="line">    <span class="attribute">cursor</span>: <span class="built_in">url</span>(https://bu.dusays.com/<span class="number">2022</span>/<span class="number">05</span>/<span class="number">17</span>/<span class="number">6283</span>c376afcfc.png), auto</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
              </div>
            </details>

<h3 id="鼠标-字跟随掉落效果"><a href="#鼠标-字跟随掉落效果" class="headerlink" title="鼠标 * 字跟随掉落效果"></a>鼠标 * 字跟随掉落效果</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/03/05/f9fc72341622b.png"></div></div>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <p>在<code>BlogRoot/node_modules/hexo-theme-butterfly/source/js</code>目录下创建一个<code>cursor.js</code>文件。</p><figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">/*!</span></span><br><span class="line"><span class="comment"> * Fairy Dust Cursor.js</span></span><br><span class="line"><span class="comment"> * - 90's cursors collection</span></span><br><span class="line"><span class="comment"> * -- https://github.com/tholman/90s-cursor-effects</span></span><br><span class="line"><span class="comment"> * -- http://codepen.io/tholman/full/jWmZxZ/</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">fairyDustCursor</span>(<span class="params"></span>) </span>{</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> possibleColors = [<span class="string">"#D61C59"</span>, <span class="string">"#E7D84B"</span>, <span class="string">"#1B8798"</span>]</span><br><span class="line">    <span class="keyword">var</span> width = <span class="built_in">window</span>.innerWidth;</span><br><span class="line">    <span class="keyword">var</span> height = <span class="built_in">window</span>.innerHeight;</span><br><span class="line">    <span class="keyword">var</span> cursor = { <span class="attr">x</span>: width / <span class="number">2</span>, <span class="attr">y</span>: width / <span class="number">2</span> };</span><br><span class="line">    <span class="keyword">var</span> particles = [];</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">init</span>(<span class="params"></span>) </span>{</span><br><span class="line">        bindEvents();</span><br><span class="line">        loop();</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Bind events that are needed</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">bindEvents</span>(<span class="params"></span>) </span>{</span><br><span class="line">        <span class="built_in">document</span>.addEventListener(<span class="string">'mousemove'</span>, onMouseMove);</span><br><span class="line">        <span class="built_in">document</span>.addEventListener(<span class="string">'touchmove'</span>, onTouchMove);</span><br><span class="line">        <span class="built_in">document</span>.addEventListener(<span class="string">'touchstart'</span>, onTouchMove);</span><br><span class="line"></span><br><span class="line">        <span class="built_in">window</span>.addEventListener(<span class="string">'resize'</span>, onWindowResize);</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">onWindowResize</span>(<span class="params">e</span>) </span>{</span><br><span class="line">        width = <span class="built_in">window</span>.innerWidth;</span><br><span class="line">        height = <span class="built_in">window</span>.innerHeight;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">onTouchMove</span>(<span class="params">e</span>) </span>{</span><br><span class="line">        <span class="keyword">if</span> (e.touches.length &gt; <span class="number">0</span>) {</span><br><span class="line">            <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; e.touches.length; i++) {</span><br><span class="line">                addParticle(e.touches[i].clientX, e.touches[i].clientY, possibleColors[<span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * possibleColors.length)]);</span><br><span class="line">            }</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">onMouseMove</span>(<span class="params">e</span>) </span>{</span><br><span class="line">        cursor.x = e.clientX;</span><br><span class="line">        cursor.y = e.clientY;</span><br><span class="line">        addParticle(cursor.x, cursor.y, possibleColors[<span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * possibleColors.length)]);</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">addParticle</span>(<span class="params">x, y, color</span>) </span>{</span><br><span class="line">        <span class="keyword">var</span> particle = <span class="keyword">new</span> Particle();</span><br><span class="line">        particle.init(x, y, color);</span><br><span class="line">        particles.push(particle);</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">updateParticles</span>(<span class="params"></span>) </span>{</span><br><span class="line">        <span class="comment">// Updated</span></span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; particles.length; i++) {</span><br><span class="line">            particles[i].update();</span><br><span class="line">        }</span><br><span class="line">        <span class="comment">// Remove dead particles</span></span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> i = particles.length - <span class="number">1</span>; i &gt;= <span class="number">0</span>; i--) {</span><br><span class="line">            <span class="keyword">if</span> (particles[i].lifeSpan &lt; <span class="number">0</span>) {</span><br><span class="line">                particles[i].die();</span><br><span class="line">                particles.splice(i, <span class="number">1</span>);</span><br><span class="line">            }</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">loop</span>(<span class="params"></span>) </span>{</span><br><span class="line">        requestAnimationFrame(loop);</span><br><span class="line">        updateParticles();</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * Particles</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">Particle</span>(<span class="params"></span>) </span>{</span><br><span class="line">        <span class="built_in">this</span>.character = <span class="string">"*"</span>;</span><br><span class="line">        <span class="built_in">this</span>.lifeSpan = <span class="number">120</span>; <span class="comment">//ms</span></span><br><span class="line">        <span class="built_in">this</span>.initialStyles = {</span><br><span class="line">            <span class="string">"position"</span>: <span class="string">"fixed"</span>,</span><br><span class="line">            <span class="string">"top"</span>: <span class="string">"0"</span>, <span class="comment">//必须加</span></span><br><span class="line">            <span class="string">"display"</span>: <span class="string">"block"</span>,</span><br><span class="line">            <span class="string">"pointerEvents"</span>: <span class="string">"none"</span>,</span><br><span class="line">            <span class="string">"z-index"</span>: <span class="string">"10000000"</span>,</span><br><span class="line">            <span class="string">"fontSize"</span>: <span class="string">"20px"</span>,</span><br><span class="line">            <span class="string">"will-change"</span>: <span class="string">"transform"</span></span><br><span class="line">        };</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Init, and set properties</span></span><br><span class="line">        <span class="built_in">this</span>.init = <span class="function"><span class="keyword">function</span>(<span class="params">x, y, color</span>) </span>{</span><br><span class="line">            <span class="built_in">this</span>.velocity = {</span><br><span class="line">                x: (<span class="built_in">Math</span>.random() &lt; <span class="number">0.5</span> ? -<span class="number">1</span> : <span class="number">1</span>) * (<span class="built_in">Math</span>.random() / <span class="number">2</span>),</span><br><span class="line">                y: <span class="number">1</span></span><br><span class="line">            };</span><br><span class="line">            <span class="built_in">this</span>.position = { <span class="attr">x</span>: x - <span class="number">10</span>, <span class="attr">y</span>: y - <span class="number">20</span> };</span><br><span class="line">            <span class="built_in">this</span>.initialStyles.color = color;</span><br><span class="line">            <span class="built_in">this</span>.element = <span class="built_in">document</span>.createElement(<span class="string">'span'</span>);</span><br><span class="line">            <span class="built_in">this</span>.element.innerHTML = <span class="built_in">this</span>.character;</span><br><span class="line">            applyProperties(<span class="built_in">this</span>.element, <span class="built_in">this</span>.initialStyles);</span><br><span class="line">            <span class="built_in">this</span>.update();</span><br><span class="line">            <span class="built_in">document</span>.body.appendChild(<span class="built_in">this</span>.element);</span><br><span class="line">        };</span><br><span class="line">        <span class="built_in">this</span>.update = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">            <span class="built_in">this</span>.position.x += <span class="built_in">this</span>.velocity.x;</span><br><span class="line">            <span class="built_in">this</span>.position.y += <span class="built_in">this</span>.velocity.y;</span><br><span class="line">            <span class="built_in">this</span>.lifeSpan--;</span><br><span class="line"></span><br><span class="line">            <span class="built_in">this</span>.element.style.transform = <span class="string">"translate3d("</span> <span class="built_in">this</span>.position.x <span class="string">"px,"</span> <span class="built_in">this</span>.position.y <span class="string">"px,0) scale("</span> (<span class="built_in">this</span>.lifeSpan / <span class="number">120</span>) <span class="string">")"</span>;</span><br><span class="line">        }</span><br><span class="line">        <span class="built_in">this</span>.die = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">            <span class="built_in">this</span>.element.parentNode.removeChild(<span class="built_in">this</span>.element);</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Applies css `properties` to an element.</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">applyProperties</span>(<span class="params">target, properties</span>) </span>{</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> properties) {</span><br><span class="line">            target.style[key] = properties[key];</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    init();</span><br><span class="line">})();</span><br></pre></td></tr></tbody></table></figure><p>然后，在主题配置文件<code>_config.butterfly.yml</code>中，引入<code>cursor.js</code>文件。</p><div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/06/05/629ccb16bb10b.jpg"></div></div>
              </div>
            </details>

<h3 id="滚动条"><a href="#滚动条" class="headerlink" title="滚动条"></a>滚动条</h3><details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <p>将以下代码复制到<code>custom.css</code>即可。</p><figure class="highlight css"><table><tbody><tr><td class="code"><pre><span class="line"><span class="selector-pseudo">::-webkit-scrollbar</span> {</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">8px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">8px</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">::-webkit-scrollbar-track</span> {</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">2em</span>;</span><br><span class="line">    <span class="comment">/* background-color: rgba(73, 177, 245, .2); */</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">::-webkit-scrollbar-thumb</span> {</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(<span class="number">255</span> <span class="number">255</span> <span class="number">255</span> / .<span class="number">3</span>);</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-webkit-linear-gradient</span>(<span class="number">45deg</span>, rgba(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.1</span>) <span class="number">25%</span>, transparent <span class="number">25%</span>, transparent <span class="number">50%</span>, <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.1</span>) <span class="number">50%</span>, <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.1</span>) <span class="number">75%</span>, transparent <span class="number">75%</span>, transparent);</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">2em</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">::-webkit-scrollbar-corner</span> {</span><br><span class="line">    <span class="attribute">background-color</span>: transparent</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
              </div>
            </details>

<h3 id="手机侧边栏默认不展开"><a href="#手机侧边栏默认不展开" class="headerlink" title="手机侧边栏默认不展开"></a>手机侧边栏默认不展开</h3><p>若主题版本大于 <a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly/releases/tag/4.0.0">v4.0.0</a>，可直接在子目录里添加 <code>hide</code> ：</p>
<figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">menu:</span></span><br><span class="line">  <span class="attr">Home:</span> <span class="string">/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-home</span></span><br><span class="line">  <span class="attr">Archives:</span> <span class="string">/archives/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-archive</span></span><br><span class="line">  <span class="attr">Tags:</span> <span class="string">/tags/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-tags</span></span><br><span class="line">  <span class="attr">Categories:</span> <span class="string">/categories/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-folder-open</span></span><br><span class="line">  <span class="string">List||fas</span> <span class="string">fa-list||hide:</span></span><br><span class="line">    <span class="attr">Music:</span> <span class="string">/music/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-music</span></span><br><span class="line">    <span class="attr">Movie:</span> <span class="string">/movies/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-video</span></span><br><span class="line">  <span class="attr">Link:</span> <span class="string">/link/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-link</span></span><br><span class="line">  <span class="attr">About:</span> <span class="string">/about/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-heart</span></span><br></pre></td></tr></tbody></table></figure>

<p><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly/releases/tag/4.0.0">v3.7.1</a> 版本中直接默认子目录是展开的，如果你想要隐藏，按下面步骤操作即可。</p>
<details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/03/05/5bf3d54f04dff.jpg"></div></div>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <p>在<code>BlogRoot/node_modules/hexo-theme-butterfly/source/js</code>文件下新建 js 文件，并命名为 <code>custom.js</code>(命名按照自己喜好去命名，只需在主题配置文件<code>_config.butterfly.yml</code>中引入对应的<code>js</code>文件即可)，将以下代码复制到新建的<code>custom.js</code>中。</p><figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">/* 手机侧边栏默认不展开 */</span></span><br><span class="line"><span class="keyword">var</span> mobile_sidebar_menus = <span class="built_in">document</span>.getElementById(<span class="string">"sidebar-menus"</span>);</span><br><span class="line"><span class="keyword">if</span> (mobile_sidebar_menus) {</span><br><span class="line">    <span class="keyword">var</span> menus_item_child = mobile_sidebar_menus.getElementsByClassName(</span><br><span class="line">        <span class="string">"menus_item_child"</span></span><br><span class="line">    );</span><br><span class="line">    <span class="keyword">var</span> menus_expand = mobile_sidebar_menus.getElementsByClassName(<span class="string">"expand"</span>);</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; menus_item_child.length; i++) {</span><br><span class="line">        menus_item_child[i].style.display = <span class="string">"none"</span>;</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
              </div>
            </details>

<h3 id="图库"><a href="#图库" class="headerlink" title="图库"></a>图库</h3><p>图库页面只是普通的页面，你只需要hexo new page xxxxx 创建你的页面就行。</p>
<p>然后使用标签外挂 <a target="_blank" rel="noopener" href="https://butterfly.js.org/posts/4aa8abbe/#Gallery%E7%9B%B8%E5%86%8A%E5%9C%96%E5%BA%AB">galleryGroup</a>，具体用法请查看对应的内容。</p>
<figure class="highlight markdown"><table><tbody><tr><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"gallery-group-main"</span>&gt;</span></span></span><br><span class="line">{% galleryGroup 'ACG' '那些二次元的故事' '/gallery/ACG' https://bu.dusays.com/2022/11/26/638228a86935a.webp %}</span><br><span class="line">{% galleryGroup '岳阳' '2017年5月岳阳' '/gallery/YY' https://bu.dusays.com/2022/11/27/63831b681e9f8.jpg %}</span><br><span class="line">{% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}</span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></tbody></table></figure>

<div class="gallery-group-main">

  <figure class="gallery-group">
  <img class="gallery-group-img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/11/26/638228a86935a.webp" alt="Group Image Gallery">
  <figcaption>
  <div class="gallery-group-name">ACG</div>
  <p>那些二次元的故事</p>
  <a href="/@3.7.1/gallery/ACG" target="_blank"></a>
  </figcaption>
  </figure>
  

  <figure class="gallery-group">
  <img class="gallery-group-img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/11/27/63831b681e9f8.jpg" alt="Group Image Gallery">
  <figcaption>
  <div class="gallery-group-name">岳阳</div>
  <p>2017年5月岳阳</p>
  <a href="/@3.7.1/gallery/YY" target="_blank"></a>
  </figcaption>
  </figure>
  

  <figure class="gallery-group">
  <img class="gallery-group-img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg" alt="Group Image Gallery">
  <figcaption>
  <div class="gallery-group-name">OH MY GIRL</div>
  <p>关于OH MY GIRL的图片</p>
  <a href="/@3.7.1/Gallery/ohmygirl" target="_blank"></a>
  </figcaption>
  </figure>
  
</div>

<h4 id="子页面"><a href="#子页面" class="headerlink" title="子页面"></a>子页面</h4><p>子页面也是普通的页面，你只需要hexo new page xxxxx 创建你的页面就行。</p>
<p>然后使用标签外挂 <a target="_blank" rel="noopener" href="https://butterfly.js.org/posts/4aa8abbe/#Gallery%E7%9B%B8%E5%86%8A">gallery</a>，具体用法请查看对应的内容。</p>
<figure class="highlight markdown"><table><tbody><tr><td class="code"><pre><span class="line">{% gallery %}</span><br><span class="line">![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)</span><br><span class="line">![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)</span><br><span class="line">![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)</span><br><span class="line">![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)</span><br><span class="line">![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)</span><br><span class="line">![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)</span><br><span class="line">![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)</span><br><span class="line">![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></tbody></table></figure>

<div class="justified-gallery"><p><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg"><br><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg"><br><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg"><br><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg"><br><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg"><br><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg"><br><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg"><br><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg"></p>
          </div>

<div class="note pink icon flat"><i class="note-icon fas fa-fan"></i><p>如果你想要使用<code>/photo/ohmygirl</code>这样的链接显示你的图片内容</p>
<p>你可以把创建好的<code>ohmygirl</code>整个文件夹移到<code>photo</code>文件夹里去</p>
</div>

<h3 id="Valine评论邮件回复提醒"><a href="#Valine评论邮件回复提醒" class="headerlink" title="Valine评论邮件回复提醒"></a>Valine评论邮件回复提醒</h3><blockquote>
<p>由于 Valine 的国际版共享域名将于 2022 年 8 月 1 日起不再向中国大陆的最终用户提供服务，国际版共享域名仅服务于海外用户。本站已弃用 Valine ，改为 Twikoo。如果你更喜欢 Valine 的风格，你可以使用它的国区版。</p>
</blockquote>
<h4 id="参考教程"><a href="#参考教程" class="headerlink" title="参考教程"></a>参考教程</h4><p><a target="_blank" rel="noopener" href="http://www.zhaojun.im/hexo-valine-admin/">Hexo 优化 — Valine 扩展之邮件通知</a><br><a target="_blank" rel="noopener" href="https://blog.hclonely.com/posts/409d3090/">Valine 添加验证码、博主标签及评论微信、QQ 通知</a></p>
<h4 id="我的表情数据包"><a href="#我的表情数据包" class="headerlink" title="我的表情数据包"></a>我的表情数据包</h4><p>这里放上我的valine表情数据，展示如下图：</p>
<div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/8cad934e780d0.jpg"></div></div>

<p>下载请点击下面按钮：</p>
<div class="btns rounded grid5">
            <a class="button" target="_blank" rel="noopener" href="https://wwd.lanzoul.com/iMvtz05xlche" title="下载表情文件"><i class="fas fa-download"></i>下载表情文件</a>
          </div>

<h4 id="改写-menhera-表情样式"><a href="#改写-menhera-表情样式" class="headerlink" title="改写 menhera 表情样式"></a>改写 menhera 表情样式</h4><p>去除了dark模式下评论者头像的 border 和 padding（我是默认dark，如果不喜欢，则将css中的第一段去掉）。</p>
<p>因为 valine的默认宽度是 25px ， 对于 menhera-chan 表情根本无法看清，所以将它pc端评论后的表情加载设置成300px，设屏宽小于768px的，让它继承继承父元素的100%宽 - 30px ，30px是为了与右侧有一段细微间隔，下图可以看到手机端的时候，表情和盒子最右侧是有一定距离的。</p>
<p>对于浏览选择 menhera-chan 表情时，宽度太小，看不清图片，所以这里调整为设备宽的 21%-22% 。QQ和B站表情保持不变，只对 menhera-chan 表情做出改善。</p>
<p>将以下代码复制到<code>custom.css</code>即可。</p>
<figure class="highlight css"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">/* valine 评论 */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 去除了dark模式下头像border和padding */</span></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">'dark'</span>]</span> <span class="selector-class">.v</span><span class="selector-attr">[data-class=v]</span> <span class="selector-class">.vcards</span> <span class="selector-class">.vcard</span> <span class="selector-class">.vimg</span> {</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">border</span>: none;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">'dark'</span>]</span> <span class="selector-id">#post</span> <span class="selector-class">.v</span><span class="selector-attr">[data-class=v]</span> <span class="selector-class">.vcontent</span> <span class="selector-tag">img</span> {</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.v</span><span class="selector-attr">[data-class=v]</span> <span class="selector-class">.emoji</span>,</span><br><span class="line"><span class="selector-class">.v</span><span class="selector-attr">[data-class=v]</span> <span class="selector-class">.vemoji</span> {</span><br><span class="line">    <span class="attribute">vertical-align</span>: text-bottom;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.v</span><span class="selector-attr">[data-class=v]</span> <span class="selector-class">.vwrap</span> <span class="selector-class">.vemojis</span> {</span><br><span class="line">    <span class="attribute">max-height</span>: <span class="number">260px</span> <span class="meta">!important</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.v</span><span class="selector-attr">[data-class=v]</span> <span class="selector-class">.vwrap</span> <span class="selector-class">.vemojis</span> <span class="selector-tag">i</span><span class="selector-attr">[title|=menhera]</span> {</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">22%</span> <span class="meta">!important</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">10px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.v</span><span class="selector-attr">[data-class=v]</span> <span class="selector-class">.vwrap</span> <span class="selector-class">.vemojis</span> <span class="selector-tag">img</span><span class="selector-attr">[alt|=menhera]</span> {</span><br><span class="line">    <span class="attribute">max-width</span>: <span class="number">100%</span> <span class="meta">!important</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.v</span><span class="selector-attr">[data-class=v]</span> <span class="selector-class">.vcontent</span> <span class="selector-class">.emoji</span><span class="selector-attr">[alt|=menhera]</span>,</span><br><span class="line"><span class="selector-class">.v</span><span class="selector-attr">[data-class=v]</span> <span class="selector-class">.vcontent</span> <span class="selector-class">.vemoji</span><span class="selector-attr">[alt|=menhera]</span> {</span><br><span class="line">    <span class="attribute">max-width</span>: <span class="number">300px</span> <span class="meta">!important</span>;</span><br><span class="line">    <span class="comment">/* vertical-align: middle; */</span></span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">8px</span> <span class="number">1px</span>;</span><br><span class="line">    <span class="attribute">display</span>: block <span class="meta">!important</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width:</span> <span class="number">1200px</span>) {</span><br><span class="line">    <span class="selector-class">.v</span><span class="selector-attr">[data-class=v]</span> <span class="selector-class">.vwrap</span> <span class="selector-class">.vemojis</span> <span class="selector-tag">i</span><span class="selector-attr">[title|=menhera]</span> {</span><br><span class="line">        <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">8px</span>;</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width:</span> <span class="number">768px</span>) {</span><br><span class="line">    <span class="selector-class">.v</span><span class="selector-attr">[data-class=v]</span> <span class="selector-class">.vcontent</span> <span class="selector-class">.emoji</span><span class="selector-attr">[alt|=menhera]</span>,</span><br><span class="line">    <span class="selector-class">.v</span><span class="selector-attr">[data-class=v]</span> <span class="selector-class">.vcontent</span> <span class="selector-class">.vemoji</span><span class="selector-attr">[alt|=menhera]</span> {</span><br><span class="line">        <span class="attribute">max-width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> - <span class="number">30px</span>) <span class="meta">!important</span>;</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width:</span> <span class="number">576px</span>) {</span><br><span class="line">    <span class="selector-class">.v</span><span class="selector-attr">[data-class=v]</span> <span class="selector-class">.vwrap</span> <span class="selector-class">.vemojis</span> {</span><br><span class="line">        <span class="attribute">max-height</span>: <span class="number">200px</span> <span class="meta">!important</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="selector-class">.v</span><span class="selector-attr">[data-class=v]</span> <span class="selector-class">.vwrap</span> <span class="selector-class">.vemojis</span> <span class="selector-tag">i</span><span class="selector-attr">[title|=menhera]</span> {</span><br><span class="line">        <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">5px</span>;</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width:</span> <span class="number">400px</span>) {</span><br><span class="line">    <span class="selector-class">.v</span><span class="selector-attr">[data-class=v]</span> <span class="selector-class">.vwrap</span> <span class="selector-class">.vemojis</span> <span class="selector-tag">i</span><span class="selector-attr">[title|=menhera]</span> {</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">21%</span> <span class="meta">!important</span>;</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></tbody></table></figure>

<p>效果如下：</p>
<div class="justified-gallery"><p><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/08/26/84d3e2911b8ec.jpg"><br><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/08/26/24353a0e2da4f.jpg"><br><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/03/05/987c04fdd05f6.jpg"><br><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/03/05/396f32b981353.jpg"><br><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/03/05/72321b1f63e2c.jpg"><br><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/03/05/564b64b674298.jpg"></p>
          </div>

<h4 id="添加-博主-小伙伴-访客-标签"><a href="#添加-博主-小伙伴-访客-标签" class="headerlink" title="添加[博主,小伙伴,访客]标签"></a>添加[博主,小伙伴,访客]标签</h4><ol>
<li><p>打开<code>BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/third-party/comments/valine.pug</code>,按指示添加如下字段。</p>
<figure class="highlight diff"><table><tbody><tr><td class="code"><pre><span class="line">function initValine () {</span><br><span class="line">    const valine = new Valine(Object.assign({</span><br><span class="line">        el: '#vcomment',</span><br><span class="line">        appId: '#{theme.valine.appId}',</span><br><span class="line">        appKey: '#{theme.valine.appKey}',</span><br><span class="line">        placeholder: '#{theme.valine.placeholder}',</span><br><span class="line">        avatar: '#{theme.valine.avatar}',</span><br><span class="line">        meta: '#{theme.valine.guest_info }'.split(','),</span><br><span class="line">        pageSize: '#{theme.valine.pageSize}',</span><br><span class="line">        lang: '#{theme.valine.lang}',</span><br><span class="line">        recordIP: #{theme.valine.recordIP},</span><br><span class="line">        serverURLs: '#{theme.valine.serverURLs}',</span><br><span class="line">        emojiCDN: '#{theme.valine.emojiCDN}',</span><br><span class="line">        emojiMaps: !{emojiMaps},</span><br><span class="line">        enableQQ: #{theme.valine.enableQQ},</span><br><span class="line">        path: window.location.pathname,</span><br><span class="line">        requiredFields: [!{theme.valine.requiredFields ? JSON.stringify(theme.valine.requiredFields).split(',') : ''}],</span><br><span class="line">      master: '#{theme.valine.master}'.split(','),</span><br><span class="line">      friends: '#{theme.valine.friends}'.split(','),</span><br><span class="line">      tagMeta: '#{theme.valine.tagMeta || "博主,小伙伴,访客"}'.split(','),</span><br><span class="line">      metaPlaceholder: !{JSON.stringify(theme.valine.metaPlaceholder || {})},</span><br><span class="line">        visitor: #{theme.valine.visitor}</span><br><span class="line">    }, !{JSON.stringify(theme.valine.option)}))</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>如图所示：</p>
<div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/04/29/09fee55119095.jpg"></div></div></li>
<li><p>修改主题配置文件<code>_config.butterfly.yml</code>的<code>valine</code>属性。</p>
<ul>
<li><p>valine配置项添加 md5加密的博主邮箱，小伙伴邮箱</p>
<figure class="highlight diff"><table><tbody><tr><td class="code"><pre><span class="line"># valine</span><br><span class="line"># https://valine.js.org</span><br><span class="line">valine:</span><br><span class="line">  appId:  # leancloud application app id</span><br><span class="line">  appKey:  # leancloud application app key</span><br><span class="line">  pageSize: 10 # comment list page size</span><br><span class="line">  avatar: monsterid # gravatar style https://valine.js.org/#/avatar</span><br><span class="line">  lang: zh-CN # i18n: zh-CN/zh-TW/en/ja</span><br><span class="line">  placeholder:  # valine comment input placeholder (like: Please leave your footprints)</span><br><span class="line">  guest_info: nick,mail,link # valine comment header info (nick/mail/link)</span><br><span class="line">  recordIP: false # Record reviewer IP</span><br><span class="line">  serverURLs:  # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)</span><br><span class="line">  bg: # valine background</span><br><span class="line">  emojiCDN:  # emoji CDN</span><br><span class="line">  enableQQ: true # enable the Nickname box to automatically get QQ Nickname and QQ Avatar</span><br><span class="line">  requiredFields: nick,mail # required fields (nick/mail)</span><br><span class="line">master: # md5加密后的博主邮箱</span><br><span class="line">  - d4e7????????????44a14e9a94  #可添加多个</span><br><span class="line">friends: # md5加密后的小伙伴邮箱</span><br><span class="line">  - 5c?????????????e268ad3819c #可添加多个</span><br><span class="line">  - 7c?????????????e2????3919c</span><br><span class="line">tagMeta: '博主,小伙伴,访客' # 标签要显示的文字,默认'博主,小伙伴,访客'</span><br><span class="line">metaPlaceholder:</span><br><span class="line">  nick: 昵称/QQ号(必填)</span><br><span class="line">  mail: 邮箱(必填)</span><br><span class="line">  link: 网址(https://)</span><br></pre></td></tr></tbody></table></figure>
<p>如图所示：</p>
<div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/04/27/15d1c1b458da1.jpg"></div></div>
</li>
<li><p>在主题配置文件<code>_config.butterfly.yml</code>的CDN配置项添加如下内容。将<code>Valine.min.js</code>替换成魔改版本。</p>
<figure class="highlight diff"><table><tbody><tr><td class="code"><pre><span class="line">    CDN:</span><br><span class="line">      # comments</span><br><span class="line">      gitalk: https://fastly.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js</span><br><span class="line">      gitalk_css: https://fastly.jsdelivr.net/npm/gitalk/dist/gitalk.min.css</span><br><span class="line"><span class="deletion">-     valine: https://fastly.jsdelivr.net/npm/valine/dist/Valine.min.js</span></span><br><span class="line">    valine: https://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/valine_f/valine.min.js</span><br></pre></td></tr></tbody></table></figure>

</li>
</ul>
</li>
</ol>
<h4 id="valine获取评论失败"><a href="#valine获取评论失败" class="headerlink" title="valine获取评论失败"></a>valine获取评论失败</h4><p>如下图：</p>
<div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/1d3723a5bf858.jpg"></div></div>
<p>这里并没有加载和渲染 valine 评论数据 ， 但在 LeanCloud 数据存储中 是存在评论数据的。</p>
<div class="note red icon modern"><i class="note-icon fas fa-bullhorn card-announcement-animation"></i><p>原因 ：LeanCloud 国际版通用域名失效</p>
</div>

<p>打开控制台发现<code>https://us.avoscloud.com/1.1/classes/Comment?xxxxx</code>已经请求失败（net::ERR_NAME_NOT_RESOLVED），域名也无法ping通。</p>
<div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/1f20328863e46.jpg"></div></div>

<p>解决办法：</p>
<p>将 Valine 指定 自定义服务器URL。在主题配置里的 Valine 的 serverURLs 填入<code>https://xxxxxxxx.api.lncldglobal.com</code>。自定义服务器的URL需要到 LeanCloud后台 查看。打开后台之后进入 Settings - App Keys ，Request domain 里面的<code>xxxxxxxx.api.lncldglobal.com</code>就是你需要指定的服务器URL。xxxxxxxx 就是 AppID的前8位字符。</p>
<p>如下图:</p>
<div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/7a37bcaf7b976.jpg"></div></div>

<p>经 postman 测试 ，<code>https://xxxxxxxx.api.lncldglobal.com/1.1/classes/Comment?x=x&amp;xx=xx</code>该接口会正常返回评论数据。</p>
<div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/a3545407baae3.jpg"></div></div>

<blockquote>
<p>关于valine评论，这里会抽空写一篇详细的教程，敬请期待。</p>
</blockquote>
<h3 id="首页分类磁铁"><a href="#首页分类磁铁" class="headerlink" title="首页分类磁铁"></a>首页分类磁铁</h3><blockquote>
<p>原教程：<a target="_blank" rel="noopener" href="https://akilar.top/posts/a9131002/">Categories Magnet</a></p>
</blockquote>
<details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/08/26/5f6c8366b5a94.jpg"></div></div>
              </div>
            </details>

<details red=""><summary> 插件版教程（推荐👍） </summary>
              <div class="content">
              <ol><li>安装依赖，前往博客根目录，打开cmd命令窗口执行如下命令：<figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">npm install hexo-butterfly-categories-card --save</span><br></pre></td></tr></tbody></table></figure></li><li>添加配置信息，在站点配置文件<code>_config.yml</code>或者主题配置文件<code>_config.butterfly.yml</code>中添加<figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">categoryBar:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment"># 开关</span></span><br><span class="line">  <span class="attr">priority:</span> <span class="number">5</span> <span class="comment">#过滤器优先权</span></span><br><span class="line">  <span class="attr">enable_page:</span> <span class="string">/</span> <span class="comment"># 应用页面</span></span><br><span class="line">  <span class="attr">layout:</span> <span class="comment"># 挂载容器类型</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">id</span></span><br><span class="line">    <span class="attr">name:</span> <span class="string">recent-posts</span></span><br><span class="line">    <span class="attr">index:</span> <span class="number">0</span></span><br><span class="line">  <span class="attr">column:</span> <span class="string">odd</span> <span class="comment"># odd：3列 | even：4列</span></span><br><span class="line">  <span class="attr">row:</span> <span class="number">1</span> <span class="comment">#显示行数，默认两行，超过行数切换为滚动显示</span></span><br><span class="line">  <span class="attr">message:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">descr:</span> <span class="string">Ubuntu指南</span></span><br><span class="line">      <span class="attr">cover:</span> <span class="string">https://assets.akilar.top/image/cover1.webp</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">descr:</span> <span class="string">玩转Win10</span></span><br><span class="line">      <span class="attr">cover:</span> <span class="string">https://assets.akilar.top/image/cover2.webp</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">descr:</span> <span class="string">长篇小说连载</span></span><br><span class="line">      <span class="attr">cover:</span> <span class="string">https://assets.akilar.top/image/cover3.webp</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">descr:</span> <span class="string">个人日记</span></span><br><span class="line">      <span class="attr">cover:</span> <span class="string">https://assets.akilar.top/image/cover4.webp</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">descr:</span> <span class="string">诗词歌赋</span></span><br><span class="line">      <span class="attr">cover:</span> <span class="string">https://assets.akilar.top/image/cover5.webp</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">descr:</span> <span class="string">杂谈教程</span></span><br><span class="line">      <span class="attr">cover:</span> <span class="string">https://assets.akilar.top/image/cover6.webp</span></span><br><span class="line">  <span class="attr">custom_css:</span> <span class="string">https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css</span></span><br></pre></td></tr></tbody></table></figure></li><li>参数意义<table><thead><tr><th align="center">参数</th><th align="center">备选值/类型</th><th align="center">释义</th></tr></thead><tbody><tr><td align="center">priority</td><td align="center">number</td><td align="center">【可选】过滤器优先级，数值越小，执行越早，默认为10，选填</td></tr><tr><td align="center">enable</td><td align="center">true/false</td><td align="center">【必选】控制开关</td></tr><tr><td align="center">enable_page</td><td align="center">path/all</td><td align="center">【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为’/‘</td></tr><tr><td align="center">layout.type</td><td align="center">id/class</td><td align="center">【可选】挂载容器类型，填写id或class，不填则默认为id</td></tr><tr><td align="center">layout.name</td><td align="center">text</td><td align="center">【必选】挂载容器名称</td></tr><tr><td align="center">layout.index</td><td align="center">0和正整数</td><td align="center">【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位</td></tr><tr><td align="center">column</td><td align="center">odd/even</td><td align="center">【可选】显示列数，考虑到比例问题，只提供3列和4列，odd为3列， even为4列</td></tr><tr><td align="center">row</td><td align="center">number</td><td align="center">【可选】显示行数，默认两行，超过行数切换为滚动显示</td></tr><tr><td align="center">message.descr</td><td align="center">text</td><td align="center">分类描述,需要和你自己的文章分类一一对应。</td></tr><tr><td align="center">message.cover</td><td align="center">url</td><td align="center">分类背景,需要和你自己的文章分类一一对应。</td></tr><tr><td align="center">custom_css</td><td align="center">url</td><td align="center">【可选】自定义样式，会替换默认的css链接，可以下载文档给出的cdn链接后自主修改</td></tr></tbody></table></li></ol>
              </div>
            </details>
<details yellow=""><summary> 旧版教程（不推荐） </summary>
              <div class="content">
              <ol><li>修改<code>BlogRoot/node_modules/hexo-theme-butterfly/layout/index.pug</code><figure class="highlight diff"><table><tbody><tr><td class="code"><pre><span class="line">extends includes/layout.pug</span><br><span class="line">block content</span><br><span class="line">  include ./includes/mixins/post-ui.pug</span><br><span class="line">  #recent-posts.recent-posts</span><br><span class="line">  if theme.categoryBar.enable</span><br><span class="line">    .recent-post-item(style='height:auto;width:100%;padding:0px;')</span><br><span class="line">      #categoryBar!= list_categories(site.categories,{class: 'categoryBar',depth: 1})</span><br><span class="line">    +postUI</span><br><span class="line">    include includes/pagination.pug</span><br></pre></td></tr></tbody></table></figure></li><li>新建<code>BlogRoot/node_modules/hexo-theme-butterfly/source/css/_layout/categoryBar.styl</code><figure class="highlight css"><table><tbody><tr><td class="code"><pre><span class="line">if hexo-config('categoryBar.enable')</span><br><span class="line">  <span class="selector-id">#categoryBar</span></span><br><span class="line">    <span class="selector-tag">width</span> 100%!<span class="selector-tag">important</span></span><br><span class="line">  <span class="selector-tag">ul</span></span><br><span class="line">    &amp;<span class="selector-class">.categoryBar-list</span></span><br><span class="line">      <span class="selector-tag">margin</span> 5<span class="selector-tag">px</span> 5<span class="selector-tag">px</span> 0 5<span class="selector-tag">px</span>!<span class="selector-tag">important</span></span><br><span class="line">      <span class="selector-tag">padding</span> 0!<span class="selector-tag">important</span></span><br><span class="line"></span><br><span class="line">  <span class="selector-tag">li</span></span><br><span class="line">    &amp;<span class="selector-class">.categoryBar-list-item</span></span><br><span class="line">      <span class="selector-tag">font-weight</span> <span class="selector-tag">bold</span></span><br><span class="line">      <span class="selector-tag">display</span> <span class="selector-tag">inline-block</span></span><br><span class="line">      <span class="selector-tag">height</span> 180<span class="selector-tag">px</span>!<span class="selector-tag">important</span></span><br><span class="line">      <span class="selector-tag">margin</span> 5<span class="selector-tag">px</span> .5% 0 .5%!<span class="selector-tag">important</span></span><br><span class="line">      <span class="selector-tag">background-image</span> <span class="selector-tag">linear-gradient</span>(<span class="selector-tag">rgba</span>(0, 0, 0, 0.4) 25%, <span class="selector-tag">rgba</span>(16, 16, 16, 0) 100%)</span><br><span class="line">      <span class="selector-tag">border-radius</span> 10<span class="selector-tag">px</span></span><br><span class="line">      <span class="selector-tag">padding</span> 25<span class="selector-tag">px</span> 0 25<span class="selector-tag">px</span> 25<span class="selector-tag">px</span>!<span class="selector-tag">important</span></span><br><span class="line">      <span class="selector-tag">box-shadow</span> <span class="selector-tag">rgba</span>(50, 50, 50, 0.3)  50<span class="selector-tag">px</span> 50<span class="selector-tag">px</span> 50<span class="selector-tag">px</span> 50<span class="selector-tag">px</span> <span class="selector-tag">inset</span></span><br><span class="line">      <span class="selector-tag">overflow</span> <span class="selector-tag">hidden</span></span><br><span class="line">      <span class="selector-tag">background-size</span> 100%!<span class="selector-tag">important</span></span><br><span class="line">      <span class="selector-tag">background-position</span> <span class="selector-tag">center</span>!<span class="selector-tag">important</span></span><br><span class="line">      &amp;<span class="selector-pseudo">:hover</span></span><br><span class="line">        <span class="selector-tag">background-size</span> 110%!<span class="selector-tag">important</span></span><br><span class="line">        <span class="selector-tag">box-shadow</span> <span class="selector-tag">inset</span> 500<span class="selector-tag">px</span> 50<span class="selector-tag">px</span> 50<span class="selector-tag">px</span> 50<span class="selector-tag">px</span> <span class="selector-tag">rgba</span>(50,50,50, 0.6)</span><br><span class="line">        <span class="selector-tag">span</span></span><br><span class="line">          &amp;<span class="selector-class">.categoryBar-list-count</span></span><br><span class="line">            &amp;<span class="selector-pseudo">::after</span></span><br><span class="line">              <span class="selector-tag">transition</span> <span class="selector-tag">all</span> .5<span class="selector-tag">s</span></span><br><span class="line">              <span class="selector-tag">transform</span> <span class="selector-tag">translate</span>(<span class="selector-tag">-100</span>%, 0)</span><br><span class="line">  <span class="selector-tag">a</span></span><br><span class="line">    &amp;<span class="selector-class">.categoryBar-list-link</span></span><br><span class="line">      <span class="selector-tag">color</span> <span class="selector-tag">white</span>!<span class="selector-tag">important</span></span><br><span class="line">      <span class="selector-tag">font-size</span> 20<span class="selector-tag">px</span>!<span class="selector-tag">important</span></span><br><span class="line">      &amp;<span class="selector-pseudo">::before</span></span><br><span class="line">        content '|'!important</span><br><span class="line">        <span class="selector-tag">color</span> <span class="selector-tag">white</span>!<span class="selector-tag">important</span></span><br><span class="line">        <span class="selector-tag">font-size</span> 20<span class="selector-tag">px</span>!<span class="selector-tag">important</span></span><br><span class="line">      &amp;<span class="selector-pseudo">:after</span></span><br><span class="line">        content ''</span><br><span class="line">        <span class="selector-tag">position</span> <span class="selector-tag">relative</span></span><br><span class="line">        <span class="selector-tag">width</span> 0</span><br><span class="line">        <span class="selector-tag">bottom</span> 0</span><br><span class="line">        <span class="selector-tag">display</span> <span class="selector-tag">block</span></span><br><span class="line">        <span class="selector-tag">height</span> 3<span class="selector-tag">px</span></span><br><span class="line">        <span class="selector-tag">border-radius</span> 3<span class="selector-tag">px</span></span><br><span class="line">        <span class="selector-tag">background-color</span> <span class="selector-tag">white</span></span><br><span class="line">      &amp;<span class="selector-pseudo">:hover</span></span><br><span class="line">        &amp;<span class="selector-pseudo">:after</span></span><br><span class="line">          <span class="selector-tag">width</span> 90%</span><br><span class="line">          <span class="selector-tag">left</span> 1%</span><br><span class="line">          <span class="selector-tag">transition</span> <span class="selector-tag">all</span> 0.5<span class="selector-tag">s</span></span><br><span class="line"></span><br><span class="line">  <span class="selector-tag">span</span></span><br><span class="line">    &amp;<span class="selector-class">.categoryBar-list-count</span></span><br><span class="line">      <span class="selector-tag">display</span> <span class="selector-tag">block</span>!<span class="selector-tag">important</span></span><br><span class="line">      <span class="selector-tag">color</span> <span class="selector-tag">white</span>!<span class="selector-tag">important</span></span><br><span class="line">      <span class="selector-tag">font-size</span> 20<span class="selector-tag">px</span>!<span class="selector-tag">important</span></span><br><span class="line">      &amp;<span class="selector-pseudo">::before</span></span><br><span class="line">        content '\f02d'!important</span><br><span class="line">        <span class="selector-tag">padding-right</span> 15<span class="selector-tag">px</span>!<span class="selector-tag">important</span></span><br><span class="line">        <span class="keyword">@extend</span> .fontawesomeIcon</span><br><span class="line">      &amp;::after</span><br><span class="line">        padding <span class="number">5px</span></span><br><span class="line">        display block!important</span><br><span class="line">        color white!important</span><br><span class="line">        font-size <span class="number">20px</span>!important</span><br><span class="line">        position relative</span><br><span class="line">        right -<span class="number">100%</span></span><br><span class="line">  covers = hexo-config(<span class="string">'categoryBar.cover'</span>)</span><br><span class="line">  for cover,i in covers</span><br><span class="line">    li.<span class="attribute">categoryBar-list-item:</span>nth-child({<span class="selector-tag">i</span>+1})</span><br><span class="line">      <span class="selector-tag">background</span> <span class="selector-tag">unquote</span>(<span class="selector-tag">cover</span>)</span><br><span class="line">  descrs = hexo-config('categoryBar.descr')</span><br><span class="line">  <span class="selector-tag">for</span> <span class="selector-tag">descr</span>,<span class="selector-tag">i</span> <span class="selector-tag">in</span> <span class="selector-tag">descrs</span></span><br><span class="line">    li.categoryBar-list-item:nth-child({i+1})&gt;span::after</span><br><span class="line">      <span class="selector-tag">content</span> <span class="selector-tag">descr</span>!<span class="selector-tag">important</span></span><br><span class="line">  if hexo-config('categoryBar.column') == 'odd'</span><br><span class="line">    <span class="selector-tag">li</span></span><br><span class="line">      &amp;<span class="selector-class">.categoryBar-list-item</span></span><br><span class="line">        <span class="selector-tag">width</span> 32.3%!<span class="selector-tag">important</span></span><br><span class="line">  else if hexo-config('categoryBar.column') == 'even'</span><br><span class="line">    <span class="selector-tag">li</span></span><br><span class="line">      &amp;<span class="selector-class">.categoryBar-list-item</span></span><br><span class="line">        <span class="selector-tag">width</span> 24%!<span class="selector-tag">important</span></span><br><span class="line">  <span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width:</span> <span class="number">650px</span>)</span><br><span class="line">    li</span><br><span class="line">      &amp;.categoryBar-list-item</span><br><span class="line">        width <span class="number">48%</span>!important</span><br><span class="line">        height <span class="number">150px</span>!important</span><br><span class="line">        margin <span class="number">5px</span> <span class="number">1%</span> <span class="number">0</span> <span class="number">1%</span>!important</span><br><span class="line"></span><br><span class="line">  $caterow =  hexo-config(<span class="string">'categoryBar.row'</span>)?hexo-config(<span class="string">'categoryBar.row'</span>):<span class="number">2</span></span><br><span class="line">  .categoryBar-list</span><br><span class="line">    max-height <span class="number">190px</span> * $caterow</span><br><span class="line">    overflow auto</span><br><span class="line">    &amp;::-webkit-scrollbar</span><br><span class="line">      width <span class="number">0</span>!important</span><br><span class="line">  @media screen <span class="keyword">and</span> (<span class="attribute">max-width:</span> <span class="number">650px</span>)</span><br><span class="line">    .categoryBar-list</span><br><span class="line">      max-height <span class="number">160px</span> * $caterow</span><br></pre></td></tr></tbody></table></figure></li><li>在主题配置文件<code>_config.butterfly.yml</code>中添加配置项：<figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">categoryBar:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">column:</span>  <span class="string">odd</span> <span class="comment"># 显示列数,odd：3列 | even：4列</span></span><br><span class="line">  <span class="attr">row:</span> <span class="number">2</span> <span class="comment">#显示行数，默认两行，超过行数切换为滚动显示</span></span><br><span class="line">  <span class="attr">descr:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">Good</span> <span class="string">things</span> <span class="string">to</span> <span class="string">share</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">Back</span> <span class="string">end</span> <span class="string">talk</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">personal</span> <span class="string">diary</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">Front</span> <span class="string">end</span> <span class="string">serialization</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">Butterfly</span> <span class="string">theme</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">Other</span> <span class="string">items</span></span><br><span class="line">  <span class="attr">cover:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">url('https://fastly.jsdelivr.net/npm/akilar-candyassets/image/cover1.webp')</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">'#abcdef'</span> <span class="comment"># HEX格式色值需要用''包裹，不然会被识别成注释</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">rgba(45,67,89,0.7)</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">linear-gradient(rgba(0,</span> <span class="number">0</span><span class="string">,</span> <span class="number">0</span><span class="string">,</span> <span class="number">0.4</span><span class="string">)</span> <span class="number">25</span><span class="string">%,</span> <span class="string">rgba(200,16</span> <span class="string">,</span> <span class="number">16</span><span class="string">,</span> <span class="number">0</span><span class="string">)</span> <span class="number">100</span><span class="string">%)</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">url('https://fastly.jsdelivr.net/npm/akilar-candyassets/image/cover5.webp')</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">url('https://fastly.jsdelivr.net/npm/akilar-candyassets/image/cover6.webp')</span></span><br></pre></td></tr></tbody></table></figure></li></ol>
              </div>
            </details>

<h3 id="侧边栏电子时钟"><a href="#侧边栏电子时钟" class="headerlink" title="侧边栏电子时钟"></a>侧边栏电子时钟</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="tabs" id="text-"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#text--1">新版效果</button></li><li class="tab"><button type="button" data-href="#text--2">旧版效果</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="text--1"><div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/11/12/636fa453ebfa1.png"></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="text--2"><div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/08/26/84a75c812010f.jpg"></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>
              </div>
            </details>

<details red=""><summary> 查看步骤 （新版，推荐👍） </summary>
              <div class="content">
              <p>✨可参考教程✨：<a target="_blank" rel="noopener" href="https://anzhiy.cn/posts/fc18.html">给butterfly添加侧边栏电子钟</a></p><ol><li>如果跑过下面旧版的教程，前往博客根目录，卸载原版电子钟插件，打开cmd命令窗口执行如下命令：<figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">npm uninstall hexo-butterfly-clock</span><br></pre></td></tr></tbody></table></figure></li><li>安装新的插件，前往博客根目录，打开cmd命令窗口执行如下命令：<figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">npm install hexo-butterfly-clock-anzhiyu --save</span><br></pre></td></tr></tbody></table></figure></li><li>在站点配置文件_config.yml 或 主题配置文件_config.butterfly.yml 中添加配置信息<figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">electric_clock:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment"># 开关</span></span><br><span class="line">  <span class="attr">priority:</span> <span class="number">5</span> <span class="comment">#过滤器优先权</span></span><br><span class="line">  <span class="attr">enable_page:</span> <span class="string">all</span> <span class="comment"># 应用页面</span></span><br><span class="line">  <span class="attr">exclude:</span></span><br><span class="line">    <span class="comment"># - /posts/</span></span><br><span class="line">    <span class="comment"># - /about/</span></span><br><span class="line">  <span class="attr">layout:</span> <span class="comment"># 挂载容器类型</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">class</span></span><br><span class="line">    <span class="attr">name:</span> <span class="string">sticky_layout</span></span><br><span class="line">    <span class="attr">index:</span> <span class="number">0</span></span><br><span class="line">  <span class="attr">loading:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif</span> <span class="comment">#加载动画自定义</span></span><br><span class="line">  <span class="attr">clock_css:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css</span></span><br><span class="line">  <span class="attr">clock_js:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js</span></span><br><span class="line">  <span class="attr">ip_api:</span> <span class="string">https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0</span></span><br><span class="line">  <span class="comment"># 和风天气key 默认是 b16a1fa0e63c46a4b8f28abfb06ae3fe</span></span><br><span class="line">  <span class="attr">qweather_key:</span> <span class="comment"># 你的key</span></span><br><span class="line">  <span class="comment"># 高得地图web服务key 默认为 e2b04289e870b005374ee030148d64fd&amp;s=rsv3</span></span><br><span class="line">  <span class="attr">gaud_map_key:</span> <span class="comment"># 你的key</span></span><br><span class="line">  <span class="attr">default_rectangle:</span> <span class="literal">false</span> <span class="comment"># 开启后将一直显示rectangle位置的天气，否则将获取访问者的地理位置与天气</span></span><br><span class="line">  <span class="attr">rectangle:</span> <span class="number">112.982279</span><span class="string">,28.19409</span> <span class="comment"># 获取访问者位置失败时会显示该位置的天气，同时该位置为开启default_rectangle后的位置</span></span><br></pre></td></tr></tbody></table></figure></li><li>具体参数含义<details yellow=""><summary> 点击查看具体参数 </summary>           <div class="content">           <table><thead><tr><th align="center">参数</th><th align="center">备选值/类型</th><th align="center">释义</th></tr></thead><tbody><tr><td align="center">priority</td><td align="center">number</td><td align="center">【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填</td></tr><tr><td align="center">enable</td><td align="center">true/false</td><td align="center">【必选】控制开关</td></tr><tr><td align="center">enable_page</td><td align="center">path/all</td><td align="center">【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为 all</td></tr><tr><td align="center">exclude</td><td align="center">path</td><td align="center">【可选】填写想要屏蔽的页面，可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。</td></tr><tr><td align="center">layout.type</td><td align="center">id/class</td><td align="center">【可选】挂载容器类型，填写 id 或 class，不填则默认为 id</td></tr><tr><td align="center">layout.name</td><td align="center">text</td><td align="center">【必选】挂载容器名称</td></tr><tr><td align="center">layout.index</td><td align="center">0 和正整数</td><td align="center">【可选】前提是 layout.type 为 class，因为同一页面可能有多个 class，此项用来确认究竟排在第几个顺位</td></tr><tr><td align="center">loading</td><td align="center">URL</td><td align="center">【可选】电子钟加载动画的图片</td></tr><tr><td align="center">clock_css</td><td align="center">URL</td><td align="center">【可选】电子钟样式 CDN 资源</td></tr><tr><td align="center">clock_js</td><td align="center">URL</td><td align="center">【可选】电子钟执行脚本 CDN 资源</td></tr><tr><td align="center">ip_api</td><td align="center">URL</td><td align="center">【可选】获取时钟 IP 的 API</td></tr><tr><td align="center">qweather_key</td><td align="center">text</td><td align="center">【可选】和风天气 key</td></tr><tr><td align="center">gaud_map_key</td><td align="center">text</td><td align="center">【可选】高得地图 web 服务 key</td></tr><tr><td align="center">default_rectangle</td><td align="center">text</td><td align="center">【可选】开启后将一直显示 rectangle 位置的天气，否则将获取访问者的地理位置与天气</td></tr><tr><td align="center">rectangle</td><td align="center">text</td><td align="center">【可选】获取访问者位置失败时会显示该位置的天气，同时该位置为开启 default_rectangle 后的位置</td></tr></tbody></table>           </div>         </details></li></ol><div class="note red icon modern"><i class="note-icon fas fa-bullhorn"></i><p>【qweather_key】和【gaud_map_key】建议自己申请。</p></div><details cyan=""><summary> qweather_key 申请流程 </summary>              <div class="content">              <ol><li> <a target="_blank" rel="noopener" href="https://id.qweather.com/#/login">qweather_key 传送门</a></li><li>登录后进入控制台(可能要绑定邮箱和手机)<div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/11/12/636fa9d74658e.png"></div></div></li><li>创建项目，项目名称(名字随意)、勾选【免费订阅】、适用平台【 Web API】、KEY的名称（随意填），最后点击【创建】<div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/11/12/636fad5a00726.png"></div></div></li><li>可在项目管理中，到对应的【key】<div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/11/12/636fb12960217.png"></div></div></li></ol>              </div>            </details><details cyan=""><summary> gaud_map_key 申请流程 </summary>              <div class="content">              <ol><li><a target="_blank" rel="noopener" href="https://lbs.amap.com/">gaud_map_key 传送门</a></li><li>登录后完成一些认证（个人开发），进入控制台</li><li>创建应用，应用名称随意，类型选其他<div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/11/12/636fae8a47c02.png"></div></div></li><li>点击【添加】，【key名称】随便填，【服务平台】选择 Web服务，点击提交，就得到【key】了<div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/11/12/636faf588e615.png"></div></div><div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/11/12/636faf7daca3d.png"></div></div></li></ol>              </div>            </details>
              </div>
            </details>

<details yellow=""><summary> 查看步骤（旧版，不建议） </summary>
              <div class="content">
              <p>✨参考教程✨: <a target="_blank" rel="noopener" href="https://akilar.top/posts/4e39cf4a/">Sidebar Card Clock</a></p><ol><li>安装依赖，前往博客根目录，打开cmd命令窗口执行如下命令：<figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">npm install hexo-butterfly-clock --save </span><br></pre></td></tr></tbody></table></figure></li><li>在站点配置文件<code>_config.yml</code>添加配置项：<figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment"># electric_clock</span></span><br><span class="line"><span class="attr">electric_clock:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment"># 开关</span></span><br><span class="line">  <span class="attr">priority:</span> <span class="number">5</span> <span class="comment">#过滤器优先权</span></span><br><span class="line">  <span class="attr">enable_page:</span> <span class="string">all</span> <span class="comment"># 应用页面</span></span><br><span class="line">  <span class="attr">exclude:</span></span><br><span class="line">    <span class="comment"># - /posts/</span></span><br><span class="line">    <span class="comment"># - /about/</span></span><br><span class="line">  <span class="attr">layout:</span> <span class="comment"># 挂载容器类型</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">class</span></span><br><span class="line">    <span class="attr">name:</span> <span class="string">sticky_layout</span></span><br><span class="line">    <span class="attr">index:</span> <span class="number">0</span></span><br><span class="line">  <span class="attr">loading:</span> <span class="string">https://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/theme_f/loading.gif</span> <span class="comment">#加载动画自定义 </span></span><br></pre></td></tr></tbody></table></figure></li></ol>
              </div>
            </details>

<h3 id="更换字体"><a href="#更换字体" class="headerlink" title="更换字体"></a>更换字体</h3><details cyan=""><summary> 查看步骤 </summary>
              <div class="content">
              <p>添加下面这段css即可。</p><figure class="highlight css"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> {</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">'tzy'</span>;</span><br><span class="line">    <span class="comment">/* 字体名自定义即可 */</span></span><br><span class="line">    <span class="comment">/* src: url('https://cdn.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/font/ZhuZiAWan.woff2'); */</span></span><br><span class="line">    <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">'https://npm.elemecdn.com/ethan4116-blog/lib/font/ZhuZiAWan.ttf'</span>);</span><br><span class="line">    <span class="comment">/* 字体文件路径 */</span></span><br><span class="line">    <span class="attribute">font-display</span>: swap;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span>,</span><br><span class="line"><span class="selector-class">.gitcalendar</span> {</span><br><span class="line">    <span class="attribute">font-family</span>: tzy <span class="meta">!important</span>;</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
              </div>
            </details>

<h3 id="局部css优化"><a href="#局部css优化" class="headerlink" title="局部css优化"></a>局部css优化</h3><details cyan=""><summary> 查看代码 </summary>
              <div class="content">
              <figure class="highlight css"><table><tbody><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="selector-class">.categoryBar-list</span> {</span><br><span class="line">    <span class="attribute">max-height</span>: <span class="number">400px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.clock-row</span> {</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/*3s为加载动画的时间，1为加载动画的次数，ease-in-out为动画效果*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-id">#page-header</span>,</span><br><span class="line"><span class="selector-id">#web_bg</span> {</span><br><span class="line">    <span class="attribute">-webkit-animation</span>: imgblur <span class="number">2s</span> <span class="number">1</span> ease-in-out;</span><br><span class="line">    <span class="attribute">animation</span>: imgblur <span class="number">2s</span> <span class="number">1</span> ease-in-out;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> imgblur {</span><br><span class="line">    0% {</span><br><span class="line">        <span class="attribute">filter</span>: <span class="built_in">blur</span>(<span class="number">5px</span>);</span><br><span class="line">    }</span><br><span class="line">    100% {</span><br><span class="line">        <span class="attribute">filter</span>: <span class="built_in">blur</span>(<span class="number">0px</span>);</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/*适配使用-webkit内核的浏览器 */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">@-webkit-keyframes</span> imgblur {</span><br><span class="line">    0% {</span><br><span class="line">        <span class="attribute">-webkit-filter</span>: <span class="built_in">blur</span>(<span class="number">5px</span>);</span><br><span class="line">    }</span><br><span class="line">    100% {</span><br><span class="line">        <span class="attribute">-webkit-filter</span>: <span class="built_in">blur</span>(<span class="number">0px</span>);</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.table-wrap</span> <span class="selector-tag">img</span> {</span><br><span class="line">    <span class="attribute">margin</span>: .<span class="number">6rem</span> auto .<span class="number">1rem</span> <span class="meta">!important</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 标签外挂 网站卡片 start */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.site-card-group</span> <span class="selector-tag">img</span> {</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> auto .<span class="number">1rem</span> <span class="meta">!important</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.site-card-group</span> <span class="selector-class">.info</span> <span class="selector-tag">a</span> <span class="selector-tag">img</span> {</span><br><span class="line">    <span class="attribute">margin-right</span>: <span class="number">10px</span> <span class="meta">!important</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">'dark'</span>]</span> <span class="selector-class">.site-card-group</span> <span class="selector-class">.site-card</span> <span class="selector-class">.info</span> <span class="selector-class">.title</span> {</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#f0f0f0</span> <span class="meta">!important</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">'dark'</span>]</span> <span class="selector-class">.site-card-group</span> <span class="selector-class">.site-card</span> <span class="selector-class">.info</span> <span class="selector-class">.desc</span> {</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, .<span class="number">7</span>) <span class="meta">!important</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.site-card-group</span> <span class="selector-class">.info</span> <span class="selector-class">.desc</span> {</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">4px</span> <span class="meta">!important</span>;</span><br><span class="line">}</span><br><span class="line"><span class="comment">/* 代码块颜色 */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">figure</span><span class="selector-class">.highlight</span> <span class="selector-tag">pre</span> <span class="selector-class">.addition</span> {</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#00bf03</span> <span class="meta">!important</span>;</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
              </div>
            </details>

<h3 id="禁止右键及F12等事件"><a href="#禁止右键及F12等事件" class="headerlink" title="禁止右键及F12等事件"></a>禁止右键及F12等事件</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/e9a2228cf4291.jpg"></div></div>
              </div>
            </details>

<details red=""><summary> 查看步骤 （新版，推荐👍） </summary>
              <div class="content">
              <p><del>旧版教程（已弃用）</del>，对于高版本浏览器，可以先打开控制台再进入站点（亲测 Google Chrome v100），因此本站已弃用<code>forbidden_control()</code>，可直接删除。引入的 <code>function.min.css</code> 也可以删除。</p><p>下面开始新的教程，如果你不需要 <del>禁用控制台</del> 以及 <del>禁用一些特殊 keyCode 事件</del> ，可直接忽略。</p><ol><li>修改【BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/layout.pug】，根据图中位置添加以下 pug 代码（跟 <code>head</code>、<code>body</code>同级）。<div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/11/10/636d109016294.jpg"></div></div><figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">script.</span><br><span class="line">  ((function() {var callbacks = [],timeLimit = 50,open = false;setInterval(loop, 1);return {addListener: function(fn) {callbacks.push(fn);},cancleListenr: function(fn) {callbacks = callbacks.filter(function(v) {return v !== fn;});}}</span><br><span class="line">  function loop() {var startTime = new Date();debugger;if (new Date() - startTime &gt; timeLimit) {if (!open) {callbacks.forEach(function(fn) {fn.call(null);});}open = true;window.stop();alert('你真坏，请关闭控制台！');document.body.innerHTML = "";} else {open = false;}}})()).addListener(function() {window.location.reload();});</span><br><span class="line">script.</span><br><span class="line">  function toDevtools(){</span><br><span class="line">    let num = 0; </span><br><span class="line">    let devtools = new Date();</span><br><span class="line">    devtools.toString = function() {</span><br><span class="line">      num++;</span><br><span class="line">      if (num &gt; 1) {</span><br><span class="line">          alert('你真坏，请关闭控制台！')</span><br><span class="line">          window.location.href = "about:blank"</span><br><span class="line">          blast();</span><br><span class="line">      }</span><br><span class="line">    }</span><br><span class="line">    console.log('', devtools);</span><br><span class="line">  }</span><br><span class="line">  toDevtools();</span><br></pre></td></tr></tbody></table></figure></li><li>将以下代码复制到自定义的<code>custom.js</code><figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><span class="line"><span class="built_in">document</span>.onkeydown = <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>{</span><br><span class="line">    <span class="keyword">if</span> (<span class="number">123</span> == e.keyCode || (e.ctrlKey &amp;&amp; e.shiftKey &amp;&amp; (<span class="number">74</span> === e.keyCode || <span class="number">73</span> === e.keyCode || <span class="number">67</span> === e.keyCode)) || (e.ctrlKey &amp;&amp; <span class="number">85</span> === e.keyCode)) <span class="keyword">return</span> btf.snackbarShow(<span class="string">"你真坏，不能打开控制台喔!"</span>), event.keyCode = <span class="number">0</span>, event.returnValue = !<span class="number">1</span>, !<span class="number">1</span></span><br><span class="line">};</span><br></pre></td></tr></tbody></table></figure></li><li>重新编译运行，即可看到效果。</li><li>注意: 如果自己调试阶段，可注释第一步和第二步中的代码，再进行编译，就可以打开控制台了。部署时放开注释，编译好再丢上去就OK了。</li></ol>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 （旧版，已弃用） </summary>
              <div class="content">
              <ol><li><p>在 主题配置 的 inject 的 head 里 引入 这个 css。</p><figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="string">&lt;link</span> <span class="string">rel="stylesheet"</span> <span class="string">href="https://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/css/function.min.css"&gt;</span></span><br></pre></td></tr></tbody></table></figure></li><li><p>将以下代码复制到自定义的<code>custom.js</code>， 执行 forbidden_control() 执行即可看到效果。</p><figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">forbidden_control</span>(<span class="params"></span>) </span>{</span><br><span class="line">    $.extend({</span><br><span class="line">        message: <span class="function"><span class="keyword">function</span>(<span class="params">a</span>) </span>{</span><br><span class="line">            <span class="keyword">var</span> b = {</span><br><span class="line">                title: <span class="string">""</span>,</span><br><span class="line">                message: <span class="string">"操作成功"</span>,</span><br><span class="line">                time: <span class="string">"3000"</span>,</span><br><span class="line">                type: <span class="string">"success"</span>,</span><br><span class="line">                showClose: !<span class="number">0</span>,</span><br><span class="line">                autoClose: !<span class="number">0</span>,</span><br><span class="line">                onClose: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{}</span><br><span class="line">            };</span><br><span class="line">            <span class="string">"string"</span> == <span class="keyword">typeof</span> a &amp;&amp; (b.message = a), <span class="string">"object"</span> == <span class="keyword">typeof</span> a &amp;&amp; (b = $.extend({}, b, a));</span><br><span class="line">            <span class="keyword">var</span> c, d, e, f = b.showClose ? <span class="string">'&lt;div class="c-message--close"&gt;×&lt;/div&gt;'</span> : <span class="string">""</span>,</span><br><span class="line">                g = <span class="string">""</span> !== b.title ? <span class="string">'&lt;h2 class="c-message__title"&gt;'</span> b.title <span class="string">"&lt;/h2&gt;"</span> : <span class="string">""</span>,</span><br><span class="line">                h = <span class="string">'&lt;div class="c-message animated animated-lento slideInRight"&gt;&lt;i class=" c-message--icon c-message--'</span> b.type <span class="string">'"&gt;&lt;/i&gt;&lt;div class="el-notification__group"&gt;'</span> g <span class="string">'&lt;div class="el-notification__content"&gt;'</span> b.message <span class="string">"&lt;/div&gt;"</span> f <span class="string">"&lt;/div&gt;&lt;/div&gt;"</span>,</span><br><span class="line">                i = $(<span class="string">"body"</span>),</span><br><span class="line">                j = $(h);</span><br><span class="line">            d = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">                j.addClass(<span class="string">"slideOutRight"</span>), j.one(<span class="string">"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">                    e()</span><br><span class="line">                })</span><br><span class="line">            }, e = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">                j.remove(), b.onClose(b), <span class="built_in">clearTimeout</span>(c)</span><br><span class="line">            }, $(<span class="string">".c-message"</span>).remove(), i.append(j), j.one(<span class="string">"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">                j.removeClass(<span class="string">"messageFadeInDown"</span>)</span><br><span class="line">            }), i.on(<span class="string">"click"</span>, <span class="string">".c-message--close"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">a</span>) </span>{</span><br><span class="line">                d()</span><br><span class="line">            }), b.autoClose &amp;&amp; (c = <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">                d()</span><br><span class="line">            }, b.time))</span><br><span class="line">        }</span><br><span class="line">    }),</span><br><span class="line">    <span class="built_in">document</span>.onkeydown = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line">        <span class="keyword">if</span> (<span class="number">123</span> == e.keyCode || e.ctrlKey &amp;&amp; e.shiftKey &amp;&amp; (<span class="number">74</span> === e.keyCode || <span class="number">73</span> === e.keyCode || <span class="number">67</span> === e.keyCode) || (e.ctrlKey &amp;&amp; <span class="number">85</span> === e.keyCode)) <span class="keyword">return</span> $.message({</span><br><span class="line">            message: <span class="string">"采用本站js及css请注明来源，禁止商业使用！"</span>,</span><br><span class="line">            title: <span class="string">"你真坏，不能打开控制台喔!"</span>,</span><br><span class="line">            type: <span class="string">"error"</span>,</span><br><span class="line">            autoHide: !<span class="number">1</span>,</span><br><span class="line">            time: <span class="string">"3000"</span></span><br><span class="line">        }), event.keyCode = <span class="number">0</span>, event.returnValue = !<span class="number">1</span>, !<span class="number">1</span></span><br><span class="line">    }, <span class="built_in">document</span>.oncontextmenu = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">        <span class="keyword">return</span> $.message({</span><br><span class="line">            message: <span class="string">"采用本站js及css请注明来源，禁止商业使用！"</span>,</span><br><span class="line">            title: <span class="string">"不能右键/长按喔！"</span>,</span><br><span class="line">            type: <span class="string">"error"</span>,</span><br><span class="line">            autoHide: !<span class="number">1</span>,</span><br><span class="line">            time: <span class="string">"3000"</span></span><br><span class="line">        }), !<span class="number">1</span></span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure></li></ol>
              </div>
            </details>

<h3 id="部分动效说明"><a href="#部分动效说明" class="headerlink" title="部分动效说明"></a>部分动效说明</h3><details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <p>请移步此博文 :   <a href="https://fe32.top/articles/0xiipgum/#%E7%89%B9%E6%95%88%E6%A0%87%E7%AD%BE-wow">特效标签 wow.js</a></p>
              </div>
            </details>

<h3 id="部分页面插入视频"><a href="#部分页面插入视频" class="headerlink" title="部分页面插入视频"></a>部分页面插入视频</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2021/12/07/735570394b43e.jpg"></div></div><p>实际视频效果请移步: <a href="https://fe32.top/comments/">留言板</a> 、 <a href="https://fe32.top/link/">友链</a></p>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <div class="btns rounded grid5">            <a class="button" target="_blank" rel="noopener" href="https://wwe.lanzoui.com/iNoJiww30li" title="下载文件"><i class="fas fa-download"></i>下载文件</a>          </div><ol><li>替换文件或修改文件。<br>如果你所使用的主题版本是 3.7.1 ，可直接下载文件，将<code>BlogRoot/node_modules/hexo-theme-butterfly/source/css/_layout/head.styl</code>替换成新下载的<code>head.styl</code>，将<code>BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/header/index.pug</code>替换成新下载的<code>index.pug</code>。<br>如果你所使用的主题版本跟本站（v3.7.1）有所出入，请对比一下两个文件（下载的文件和你的主题文件）之间的差异，可能需要你对<code>BlogRoot/node_modules/hexo-theme-butterfly/source/css/_layout/head.styl</code>该文件做出一些修改：<figure class="highlight stylus"><table><tbody><tr><td class="code"><pre><span class="line">&amp;.not-home-page</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">20rem</span></span><br><span class="line"></span><br><span class="line">  +maxWidth768()</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">14rem</span> !important</span><br><span class="line"></span><br><span class="line">#page-site-info</span><br><span class="line">  <span class="attribute">position</span>: absolute</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">10rem</span></span><br><span class="line">  padding: 0 .5rem</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span></span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">2</span></span><br><span class="line"></span><br><span class="line">  +maxWidth768()</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">7rem</span> !important</span><br><span class="line"></span><br><span class="line">#post-info</span><br><span class="line">  <span class="attribute">position</span>: absolute</span><br><span class="line">  ... ...</span><br><span class="line"></span><br><span class="line">&amp;.has-video</span><br><span class="line">  <span class="attribute">position</span>: relative </span><br><span class="line">  <span class="attribute">height</span>: <span class="number">80vh</span> !important</span><br><span class="line">  </span><br><span class="line">  #page-site-info</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50%</span> !important</span><br><span class="line">    <span class="attribute">margin-top</span>: -<span class="number">1.425em</span></span><br><span class="line"></span><br><span class="line">    +maxWidth768()</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">7rem</span> !important</span><br><span class="line">      <span class="attribute">margin-top</span>: <span class="number">0</span></span><br><span class="line">    </span><br><span class="line">  +maxWidth768()</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">14rem</span> !important</span><br><span class="line">    </span><br><span class="line">&amp;.not-<span class="attribute">top</span>-img</span><br><span class="line">  margin-bottom: .5rem</span><br><span class="line">  ... ...</span><br></pre></td></tr></tbody></table></figure>主要针对<code>not-home-page</code>、<code>#page-site-info</code>修改一些属性，并新增了一个名为<code>has-video</code>的类。</li><li>在自定义 css 中加入以下样式。也可以直接将这段换成<code>style</code>格式写进 <code>head.styl</code>。<figure class="highlight css"><table><tbody><tr><td class="code"><pre><span class="line"><span class="selector-id">#index-video</span> {</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">80vh</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">object-fit</span>: cover;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">max-width:</span> <span class="number">768px</span>) {</span><br><span class="line">    <span class="selector-id">#index-video</span> {</span><br><span class="line">        <span class="attribute">display</span>: none;</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">min-width:</span> <span class="number">768px</span>) {</span><br><span class="line">    <span class="selector-class">.bg-cover</span> {</span><br><span class="line">        <span class="attribute">background-image</span>: none <span class="meta">!important</span>;</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure></li><li>在想插入视频的页面，一定要有某个属性 ，可自行配置 ，如果用 type , 则<code>BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/header/index.pug</code>中则根据对应的 type 类型去写逻辑即可。<br>比如我的 <code>BlogRoot/source/comment/index.md</code> 配置如下：<figure class="highlight markdown"><table><tbody><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: 留言板</span><br><span class="line">type: 'comment' </span><br><span class="line">---</span><br></pre></td></tr></tbody></table></figure>所以在<code>BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/header/index.pug</code>中的第 23 行加入 <code>page.type == 'comment'</code><figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">- var isHomeClass = is_home() ? 'full_page' : (page.type == 'comment' || page.type == 'link' ) ? 'not-home-page has-video bg-cover' : 'not-home-page'</span><br></pre></td></tr></tbody></table></figure>第 51 - 56 行 加入<figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">if page.type == 'comment' </span><br><span class="line">    video#index-video(autoplay='' loop='' muted='')</span><br><span class="line">        source(src='你的视频地址')</span><br><span class="line">if page.type == 'link' </span><br><span class="line">    video#index-video(autoplay='' loop='' muted='')</span><br><span class="line">        source(src='你的视频地址')</span><br></pre></td></tr></tbody></table></figure></li><li>如果已经用了主页冒泡特效，请将下面这段代码替换之前的<code>chocolate.js</code>。没有使用即可忽略这步。<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> * @Author: tzy1997</span></span><br><span class="line"><span class="comment"> * @Date: 2020-12-15 20:55:25</span></span><br><span class="line"><span class="comment"> * @LastEditors: tzy1997</span></span><br><span class="line"><span class="comment"> * @LastEditTime: 2021-11-25 18:15:47</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="comment">// TODO 获取窗口高度  11-19</span></span><br><span class="line"><span class="keyword">var</span> b_h = $(<span class="built_in">window</span>).height()</span><br><span class="line"><span class="keyword">var</span> b_w = $(<span class="built_in">window</span>).width()</span><br><span class="line"></span><br><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 气泡</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">bubble</span>(<span class="params"></span>) </span>{</span><br><span class="line">        $(<span class="string">'#page-header'</span>).circleMagic({</span><br><span class="line">            radius: <span class="number">10</span>,</span><br><span class="line">            density: <span class="number">.2</span>,</span><br><span class="line">            color: <span class="string">'rgba(255,255,255,.4)'</span>,</span><br><span class="line">            clearOffset: <span class="number">0.99</span></span><br><span class="line">        });</span><br><span class="line">    }! <span class="function"><span class="keyword">function</span>(<span class="params">p</span>) </span>{</span><br><span class="line">        p.fn.circleMagic = <span class="function"><span class="keyword">function</span>(<span class="params">t</span>) </span>{</span><br><span class="line">            <span class="keyword">var</span> o, a, n, r, e = !<span class="number">0</span>,</span><br><span class="line">                i = [],</span><br><span class="line">                d = p.extend({ <span class="attr">color</span>: <span class="string">"rgba(255,0,0,.5)"</span>, <span class="attr">radius</span>: <span class="number">10</span>, <span class="attr">density</span>: <span class="number">.3</span>, <span class="attr">clearOffset</span>: <span class="number">.2</span> }, t),</span><br><span class="line">                l = <span class="built_in">this</span>[<span class="number">0</span>];</span><br><span class="line"></span><br><span class="line">            <span class="function"><span class="keyword">function</span> <span class="title">c</span>(<span class="params"></span>) </span>{ e = !(<span class="built_in">document</span>.body.scrollTop &gt; a) }</span><br><span class="line"></span><br><span class="line">            <span class="function"><span class="keyword">function</span> <span class="title">s</span>(<span class="params"></span>) </span>{</span><br><span class="line">                <span class="comment">// TODO 获取窗口高度  ethan_tzy</span></span><br><span class="line">                <span class="keyword">var</span> a_c = l.clientHeight</span><br><span class="line">                <span class="keyword">if</span> ($(<span class="string">'#index-video'</span>).length &gt; <span class="number">0</span> &amp;&amp; b_w &gt; <span class="number">768</span>) {</span><br><span class="line">                    a = b_h * <span class="number">0.8</span></span><br><span class="line">                } <span class="keyword">else</span> {</span><br><span class="line">                    a = a_c</span><br><span class="line">                }</span><br><span class="line">                <span class="comment">// o = l.clientWidth, a = l.clientHeight, l.height = a "px", n.width = o, n.height = a</span></span><br><span class="line">                o = l.clientWidth, l.height = a <span class="string">"px"</span>, n.width = o, n.height = a</span><br><span class="line">            }</span><br><span class="line"></span><br><span class="line">            <span class="function"><span class="keyword">function</span> <span class="title">h</span>(<span class="params"></span>) </span>{</span><br><span class="line">                <span class="keyword">if</span> (e)</span><br><span class="line">                    <span class="keyword">for</span> (<span class="keyword">var</span> t <span class="keyword">in</span> r.clearRect(<span class="number">0</span>, <span class="number">0</span>, o, a), i) i[t].draw();</span><br><span class="line">                requestAnimationFrame(h)</span><br><span class="line">            }</span><br><span class="line"></span><br><span class="line">            <span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>) </span>{</span><br><span class="line">                <span class="keyword">var</span> t = <span class="built_in">this</span>;</span><br><span class="line"></span><br><span class="line">                <span class="function"><span class="keyword">function</span> <span class="title">e</span>(<span class="params"></span>) </span>{ t.pos.x = <span class="built_in">Math</span>.random() * o, t.pos.y = a <span class="number">100</span> * <span class="built_in">Math</span>.random(), t.alpha = <span class="number">.1</span> <span class="built_in">Math</span>.random() * d.clearOffset, t.scale = <span class="number">.1</span> <span class="number">.3</span> * <span class="built_in">Math</span>.random(), t.speed = <span class="built_in">Math</span>.random(), <span class="string">"random"</span> === d.color ? t.color = <span class="string">"rgba("</span> <span class="built_in">Math</span>.floor(<span class="number">255</span> * <span class="built_in">Math</span>.random()) <span class="string">", "</span> <span class="built_in">Math</span>.floor(<span class="number">0</span> * <span class="built_in">Math</span>.random()) <span class="string">", "</span> <span class="built_in">Math</span>.floor(<span class="number">0</span> * <span class="built_in">Math</span>.random()) <span class="string">", "</span> <span class="built_in">Math</span>.random().toPrecision(<span class="number">2</span>) <span class="string">")"</span> : t.color = d.color }</span><br><span class="line">                t.pos = {}, e(), <span class="built_in">this</span>.draw = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ t.alpha &lt;= <span class="number">0</span> &amp;&amp; e(), t.pos.y -= t.speed, t.alpha -= <span class="number">5e-4</span>, r.beginPath(), r.arc(t.pos.x, t.pos.y, t.scale * d.radius, <span class="number">0</span>, <span class="number">2</span> * <span class="built_in">Math</span>.PI, !<span class="number">1</span>), r.fillStyle = t.color, r.fill(), r.closePath() }</span><br><span class="line">            }! <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">                <span class="comment">// TODO 气泡的高度  11-19</span></span><br><span class="line">                <span class="keyword">var</span> a_c = l.clientHeight</span><br><span class="line">                <span class="keyword">if</span> ($(<span class="string">'#index-video'</span>).length &gt; <span class="number">0</span> &amp;&amp; b_w &gt; <span class="number">768</span>) {</span><br><span class="line">                    a = b_h * <span class="number">0.8</span></span><br><span class="line">                } <span class="keyword">else</span> {</span><br><span class="line">                    a = a_c</span><br><span class="line">                }</span><br><span class="line">                o = l.offsetWidth,</span><br><span class="line">                    <span class="comment">// o = l.offsetWidth, a = l.offsetHeight,</span></span><br><span class="line">                    <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">                        <span class="keyword">var</span> t = <span class="built_in">document</span>.createElement(<span class="string">"canvas"</span>);</span><br><span class="line">                        t.id = <span class="string">"canvas"</span>, t.style.top = <span class="number">0</span>, t.style.zIndex = <span class="number">0</span>, t.style.position = <span class="string">"absolute"</span>, l.appendChild(t), t.parentElement.style.overflow = <span class="string">"hidden"</span></span><br><span class="line">                    }(), (n = <span class="built_in">document</span>.getElementById(<span class="string">"canvas"</span>)).width = o, n.height = a, r = n.getContext(<span class="string">"2d"</span>);</span><br><span class="line">                <span class="keyword">for</span> (<span class="keyword">var</span> t = <span class="number">0</span>; t &lt; o * d.density; t++) {</span><br><span class="line">                    <span class="keyword">var</span> e = <span class="keyword">new</span> f;</span><br><span class="line">                    i.push(e)</span><br><span class="line">                }</span><br><span class="line">                h()</span><br><span class="line">            }(), <span class="built_in">window</span>.addEventListener(<span class="string">"scroll"</span>, c, !<span class="number">1</span>), <span class="built_in">window</span>.addEventListener(<span class="string">"resize"</span>, s, !<span class="number">1</span>)</span><br><span class="line">        }</span><br><span class="line">    }(jQuery);</span><br><span class="line">    bubble();</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure></li><li>重新编译运行，即可看到效果。</li></ol>
              </div>
            </details>

<h3 id="公告栏两个小人"><a href="#公告栏两个小人" class="headerlink" title="公告栏两个小人"></a>公告栏两个小人</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/06/06/629cdcc58af14.jpg"></div></div>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <p>在【BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/widget/card_announcement.pug】下添加如下部分代码。</p><p>注意: 将代码复制到【card_announcement.pug】文件以后，不难发现会有重复的一段代码。你要做的一步操作是，<span class="p blue">删除重复的代码（优先保留你主题版本原有的代码），</span> 这里之所以没用 Diff 代码块，是因为怕删除【+】号的时候在格式上特别容易出错。</p><figure class="highlight plain"><table><tbody><tr><td class="code"><pre><span class="line">if theme.aside.card_announcement.enable</span><br><span class="line">  .card-widget.card-announcement</span><br><span class="line">    .item-headline</span><br><span class="line">      i.fas.fa-bullhorn.card-announcement-animation</span><br><span class="line">      span= _p('aside.card_announcement')</span><br><span class="line">    .announcement_content!= theme.aside.card_announcement.content</span><br><span class="line">  .xpand(style='height:200px;')</span><br><span class="line">    canvas.illo(width='800' height='800' style='max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;')</span><br><span class="line">script(src='https://npm.elemecdn.com/ethan4116-blog/lib/js/other/two-people/twopeople1.js')</span><br><span class="line">script(src='https://npm.elemecdn.com/ethan4116-blog/lib/js/other/two-people/zdog.dist.js')</span><br><span class="line">script#rendered-js(src='https://npm.elemecdn.com/ethan4116-blog/lib/js/other/two-people/twopeople.js')</span><br><span class="line">style.</span><br><span class="line"> .card-widget.card-announcement {</span><br><span class="line"> margin: 0;</span><br><span class="line"> align-items: center;</span><br><span class="line"> justify-content: center;</span><br><span class="line"> text-align: center;</span><br><span class="line"> }</span><br><span class="line"> canvas {</span><br><span class="line"> display: block;</span><br><span class="line"> margin: 0 auto;</span><br><span class="line"> cursor: move;</span><br><span class="line"> }</span><br></pre></td></tr></tbody></table></figure>
              </div>
            </details>

<h3 id="星空背景和流星特效"><a href="#星空背景和流星特效" class="headerlink" title="星空背景和流星特效"></a>星空背景和流星特效</h3><details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <ol><li>在<code>BlogRoot/node_modules/hexo-theme-butterfly/source/js</code>目录下新建<code>universe.js</code>，输入以下代码：<figure class="highlight javascript"><table><tbody><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">dark</span>(<span class="params"></span>) </span>{<span class="built_in">window</span>.requestAnimationFrame=<span class="built_in">window</span>.requestAnimationFrame||<span class="built_in">window</span>.mozRequestAnimationFrame||<span class="built_in">window</span>.webkitRequestAnimationFrame||<span class="built_in">window</span>.msRequestAnimationFrame;<span class="keyword">var</span> n,e,i,h,t=<span class="number">.05</span>,s=<span class="built_in">document</span>.getElementById(<span class="string">"universe"</span>),o=!<span class="number">0</span>,a=<span class="string">"180,184,240"</span>,r=<span class="string">"226,225,142"</span>,d=<span class="string">"226,225,224"</span>,c=[];<span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>{n=<span class="built_in">window</span>.innerWidth,e=<span class="built_in">window</span>.innerHeight,i=<span class="number">.216</span>*n,s.setAttribute(<span class="string">"width"</span>,n),s.setAttribute(<span class="string">"height"</span>,e)}<span class="function"><span class="keyword">function</span> <span class="title">u</span>(<span class="params"></span>)</span>{h.clearRect(<span class="number">0</span>,<span class="number">0</span>,n,e);<span class="keyword">for</span>(<span class="keyword">var</span> t=c.length,i=<span class="number">0</span>;i&lt;t;i++){<span class="keyword">var</span> s=c[i];s.move(),s.fadeIn(),s.fadeOut(),s.draw()}}<span class="function"><span class="keyword">function</span> <span class="title">y</span>(<span class="params"></span>)</span>{<span class="built_in">this</span>.reset=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="built_in">this</span>.giant=m(<span class="number">3</span>),<span class="built_in">this</span>.comet=!<span class="built_in">this</span>.giant&amp;&amp;!o&amp;&amp;m(<span class="number">10</span>),<span class="built_in">this</span>.x=l(<span class="number">0</span>,n-<span class="number">10</span>),<span class="built_in">this</span>.y=l(<span class="number">0</span>,e),<span class="built_in">this</span>.r=l(<span class="number">1.1</span>,<span class="number">2.6</span>),<span class="built_in">this</span>.dx=l(t,<span class="number">6</span>*t)+(<span class="built_in">this</span>.comet+<span class="number">1</span>-<span class="number">1</span>)*t*l(<span class="number">50</span>,<span class="number">120</span>)+<span class="number">2</span>*t,<span class="built_in">this</span>.dy=-l(t,<span class="number">6</span>*t)-(<span class="built_in">this</span>.comet+<span class="number">1</span>-<span class="number">1</span>)*t*l(<span class="number">50</span>,<span class="number">120</span>),<span class="built_in">this</span>.fadingOut=<span class="literal">null</span>,<span class="built_in">this</span>.fadingIn=!<span class="number">0</span>,<span class="built_in">this</span>.opacity=<span class="number">0</span>,<span class="built_in">this</span>.opacityTresh=l(<span class="number">.2</span>,<span class="number">1</span>-<span class="number">.4</span>*(<span class="built_in">this</span>.comet+<span class="number">1</span>-<span class="number">1</span>)),<span class="built_in">this</span>.do=l(<span class="number">5e-4</span>,<span class="number">.002</span>)+<span class="number">.001</span>*(<span class="built_in">this</span>.comet+<span class="number">1</span>-<span class="number">1</span>)},<span class="built_in">this</span>.fadeIn=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="built_in">this</span>.fadingIn&amp;&amp;(<span class="built_in">this</span>.fadingIn=!(<span class="built_in">this</span>.opacity&gt;<span class="built_in">this</span>.opacityTresh),<span class="built_in">this</span>.opacity+=<span class="built_in">this</span>.do)},<span class="built_in">this</span>.fadeOut=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="built_in">this</span>.fadingOut&amp;&amp;(<span class="built_in">this</span>.fadingOut=!(<span class="built_in">this</span>.opacity&lt;<span class="number">0</span>),<span class="built_in">this</span>.opacity-=<span class="built_in">this</span>.do/<span class="number">2</span>,(<span class="built_in">this</span>.x&gt;n||<span class="built_in">this</span>.y&lt;<span class="number">0</span>)&amp;&amp;(<span class="built_in">this</span>.fadingOut=!<span class="number">1</span>,<span class="built_in">this</span>.reset()))},<span class="built_in">this</span>.draw=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="keyword">if</span>(h.beginPath(),<span class="built_in">this</span>.giant)h.fillStyle=<span class="string">"rgba("</span>+a+<span class="string">","</span>+<span class="built_in">this</span>.opacity+<span class="string">")"</span>,h.arc(<span class="built_in">this</span>.x,<span class="built_in">this</span>.y,<span class="number">2</span>,<span class="number">0</span>,<span class="number">2</span>*<span class="built_in">Math</span>.PI,!<span class="number">1</span>);<span class="keyword">else</span> <span class="keyword">if</span>(<span class="built_in">this</span>.comet){h.fillStyle=<span class="string">"rgba("</span>+d+<span class="string">","</span>+<span class="built_in">this</span>.opacity+<span class="string">")"</span>,h.arc(<span class="built_in">this</span>.x,<span class="built_in">this</span>.y,<span class="number">1.5</span>,<span class="number">0</span>,<span class="number">2</span>*<span class="built_in">Math</span>.PI,!<span class="number">1</span>);<span class="keyword">for</span>(<span class="keyword">var</span> t=<span class="number">0</span>;t&lt;<span class="number">30</span>;t++)h.fillStyle=<span class="string">"rgba("</span>+d+<span class="string">","</span>+(<span class="built_in">this</span>.opacity-<span class="built_in">this</span>.opacity/<span class="number">20</span>*t)+<span class="string">")"</span>,h.rect(<span class="built_in">this</span>.x-<span class="built_in">this</span>.dx/<span class="number">4</span>*t,<span class="built_in">this</span>.y-<span class="built_in">this</span>.dy/<span class="number">4</span>*t-<span class="number">2</span>,<span class="number">2</span>,<span class="number">2</span>),h.fill()}<span class="keyword">else</span> h.fillStyle=<span class="string">"rgba("</span>+r+<span class="string">","</span>+<span class="built_in">this</span>.opacity+<span class="string">")"</span>,h.rect(<span class="built_in">this</span>.x,<span class="built_in">this</span>.y,<span class="built_in">this</span>.r,<span class="built_in">this</span>.r);h.closePath(),h.fill()},<span class="built_in">this</span>.move=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="built_in">this</span>.x+=<span class="built_in">this</span>.dx,<span class="built_in">this</span>.y+=<span class="built_in">this</span>.dy,!<span class="number">1</span>===<span class="built_in">this</span>.fadingOut&amp;&amp;<span class="built_in">this</span>.reset(),(<span class="built_in">this</span>.x&gt;n-n/<span class="number">4</span>||<span class="built_in">this</span>.y&lt;<span class="number">0</span>)&amp;&amp;(<span class="built_in">this</span>.fadingOut=!<span class="number">0</span>)},<span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{o=!<span class="number">1</span>},<span class="number">50</span>)}<span class="function"><span class="keyword">function</span> <span class="title">m</span>(<span class="params">t</span>)</span>{<span class="keyword">return</span> <span class="built_in">Math</span>.floor(<span class="number">1e3</span>*<span class="built_in">Math</span>.random())+<span class="number">1</span>&lt;<span class="number">10</span>*t}<span class="function"><span class="keyword">function</span> <span class="title">l</span>(<span class="params">t,i</span>)</span>{<span class="keyword">return</span> <span class="built_in">Math</span>.random()*(i-t)+t}f(),<span class="built_in">window</span>.addEventListener(<span class="string">"resize"</span>,f,!<span class="number">1</span>),<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{h=s.getContext(<span class="string">"2d"</span>);<span class="keyword">for</span>(<span class="keyword">var</span> t=<span class="number">0</span>;t&lt;i;t++)c[t]=<span class="keyword">new</span> y,c[t].reset();u()}(),<span class="function"><span class="keyword">function</span> <span class="title">t</span>(<span class="params"></span>)</span>{<span class="built_in">document</span>.getElementsByTagName(<span class="string">'html'</span>)[<span class="number">0</span>].getAttribute(<span class="string">'data-theme'</span>)==<span class="string">'dark'</span>&amp;&amp;u(),<span class="built_in">window</span>.requestAnimationFrame(t)}()};</span><br><span class="line">dark()</span><br></pre></td></tr></tbody></table></figure></li><li>在<code>BlogRoot/node_modules/hexo-theme-butterfly/source/css</code>目录下新建<code>universe.css</code>，输入以下代码：<figure class="highlight css"><table><tbody><tr><td class="code"><pre><span class="line"><span class="comment">/* 背景宇宙星光  */</span></span><br><span class="line"><span class="selector-id">#universe</span>{</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">position</span>: fixed;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">outline</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">  <span class="attribute">z-index</span>: -<span class="number">1</span>;</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure></li><li>在主题配置文件<code>_config.butterfly.yml</code>的<code>inject</code>配置项中<code>bottom</code>下填入：<figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line">  <span class="attr">bottom:</span></span><br><span class="line">   <span class="comment"># 星空背景</span></span><br><span class="line">   <span class="bullet">-</span> <span class="string">&lt;canvas</span> <span class="string">id="universe"&gt;&lt;/canvas&gt;</span></span><br><span class="line">   <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">defer</span> <span class="string">src="/js/universe.js"&gt;&lt;/script&gt;</span></span><br></pre></td></tr></tbody></table></figure></li><li>在主题配置文件<code>_config.butterfly.yml</code>的<code>inject</code>配置项中<code>head</code>下填入：<figure class="highlight yml"><table><tbody><tr><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line">  <span class="attr">head:</span></span><br><span class="line">   <span class="comment">## 星空背景</span></span><br><span class="line">   <span class="bullet">-</span> <span class="string">&lt;link</span> <span class="string">rel="stylesheet"</span> <span class="string">href="/css/universe.css"&gt;</span></span><br></pre></td></tr></tbody></table></figure></li><li>重新编译即可看到效果。</li></ol>
              </div>
            </details>

<h3 id="樱花飘落效果"><a href="#樱花飘落效果" class="headerlink" title="樱花飘落效果"></a>樱花飘落效果</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/06/06/629ce3b40d3aa.jpg"></div></div>
              </div>
            </details>

<details yellow=""><summary> 查看步骤 </summary>
              <div class="content">
              <p>在主题配置文件<code>_config.butterfly.yml</code>的<code>inject</code>配置项中<code>bottom</code>下引入<code>sakura.js</code>即可。</p><figure class="highlight diff"><table><tbody><tr><td class="code"><pre><span class="line">inject:</span><br><span class="line">  bottom:</span><br><span class="line">   # 樱花飘落效果</span><br><span class="line">   # - &lt;script async src="https://npm.elemecdn.com/tzy-blog/lib/js/other/sakura.js"&gt;&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>
              </div>
            </details>

<h3 id="灯笼特效"><a href="#灯笼特效" class="headerlink" title="灯笼特效"></a>灯笼特效</h3><div class="tag link"><a class="link-card" title="Hexo-悬挂灯笼" href="https://fe32.top/articles/Ha5487ng/"><div class="left"><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/05/01/626e8a2063be4.png"></div><div class="right"><p class="text">Hexo-悬挂灯笼</p><p class="url">https://fe32.top/articles/Ha5487ng/</p></div></a></div>

<h3 id="外挂标签"><a href="#外挂标签" class="headerlink" title="外挂标签"></a>外挂标签</h3><div class="tag link"><a class="link-card" title="基于Butterfly的外挂标签引入" href="https://fe32.top/articles/0xiipgum/"><div class="left"><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/05/01/626e8d500f25f.png"></div><div class="right"><p class="text">基于Butterfly的外挂标签引入</p><p class="url">https://fe32.top/articles/0xiipgum/</p></div></a></div>

<h3 id="添加github徽标"><a href="#添加github徽标" class="headerlink" title="添加github徽标"></a>添加github徽标</h3><div class="tag link"><a class="link-card" title="添加github徽标" href="https://fe32.top/articles/kfwr2gpa/"><div class="left"><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/05/02/626eb40f87b02.png"></div><div class="right"><p class="text">添加github徽标</p><p class="url">https://fe32.top/articles/kfwr2gpa/</p></div></a></div>

<h3 id="自定义右键菜单"><a href="#自定义右键菜单" class="headerlink" title="自定义右键菜单"></a>自定义右键菜单</h3><table>
<thead>
<tr>
<th align="center">参考方向</th>
<th align="center">教程原贴</th>
</tr>
</thead>
<tbody><tr>
<td align="center">TZY</td>
<td align="center"><a href="https://fe32.top/articles/hexo1608">Hexo Butterfly 自定义右键菜单（基础）</a></td>
</tr>
<tr>
<td align="center">ZHHEO</td>
<td align="center"><a target="_blank" rel="noopener" href="https://blog.zhheo.com/p/5e931b65.html">Butterfly 魔改：自定义右键菜单</a></td>
</tr>
<tr>
<td align="center">LYX</td>
<td align="center"><a target="_blank" rel="noopener" href="https://yisous.xyz/posts/11eb4aac/">博客自定义右键菜单升级版</a></td>
</tr>
</tbody></table>
<h3 id="加载动画"><a href="#加载动画" class="headerlink" title="加载动画"></a>加载动画</h3><p>可参考 <a target="_blank" rel="noopener" href="https://akilar.top/posts/3d221bf2/">Loading Animation</a></p>
<h3 id="评论弹幕"><a href="#评论弹幕" class="headerlink" title="评论弹幕"></a>评论弹幕</h3><p>参考教程 <a target="_blank" rel="noopener" href="https://yisous.xyz/posts/69707535/">Butterfly 主题的留言弹幕界面增强版（支持 Twikoo、Waline、Valine）</a></p>
<h3 id="自定义页脚"><a href="#自定义页脚" class="headerlink" title="自定义页脚"></a>自定义页脚</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <div class="img-wrap"><div class="img-bg"><img class="img" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/12/11/6395f7970a3bb.jpg"></div></div>
              </div>
            </details>

<details yellow=""><summary> 查看教程 </summary>
              <div class="content">
              <div class="tag link"><a class="link-card" title="Hexo + Butterfly 自定义页脚" href="https://fe32.top/articles/hexo1617/"><div class="left"><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2022/12/11/6395eec4c51ed.png"></div><div class="right"><p class="text">Hexo + Butterfly 自定义页脚</p><p class="url">https://fe32.top/articles/hexo1617/</p></div></a></div>
              </div>
            </details>

<h3 id="侧边栏公众号"><a href="#侧边栏公众号" class="headerlink" title="侧边栏公众号"></a>侧边栏公众号</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <center><img no-lazy="" class="inline" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2023/01/05/63b6d7e812c3f.jpg" style="height:120px;"><span style="margin:0 2px"></span><img no-lazy="" class="inline" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2023/01/05/63b6d7e96e93c.jpg" style="height:120px;"></center><center><img no-lazy="" class="inline" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2023/01/05/63b6da843dbae.jpg" style="height:120px;"><span style="margin:0 2px"></span><img no-lazy="" class="inline" src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2023/01/05/63b6da85c9ba4.jpg" style="height:120px;"></center>
              </div>
            </details>

<details yellow=""><summary> 查看教程 </summary>
              <div class="content">
              <div class="tag link"><a class="link-card" title="Hexo + Butterfly 侧边栏公众号" href="https://fe32.top/articles/hexo1618/"><div class="left"><img src= "https://bu.dusays.com/2022/01/14/1ff50a00bd75c.gif" data-lazy-src="https://bu.dusays.com/2023/01/05/63b6cb1a2bab2.png"></div><div class="right"><p class="text">Hexo + Butterfly 侧边栏公众号</p><p class="url">https://fe32.top/articles/hexo1618/</p></div></a></div>
              </div>
            </details>

<h3 id="文章加密插件"><a href="#文章加密插件" class="headerlink" title="文章加密插件"></a>文章加密插件</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <p>点击 <a target="_blank" rel="noopener" href="https://mhexo.github.io/">Demo Page</a> , 所有的密码都是 【hello】。</p>
              </div>
            </details>

<details yellow=""><summary> 查看教程 </summary>
              <div class="content">
              <p>详见开源地址：<a target="_blank" rel="noopener" href="https://github.com/D0n9X1n/hexo-blog-encrypt">hexo-blog-encrypt</a></p><ol><li>在根目录执行以下命令<figure class="highlight bash"><table><tbody><tr><td class="code"><pre><span class="line">npm install --save hexo-blog-encrypt</span><br></pre></td></tr></tbody></table></figure></li><li>Front matter配置方法<figure class="highlight markdown"><table><tbody><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: Hello World</span><br><span class="line">tags:</span><br><span class="line"><span class="bullet">-</span> 作为日记加密</span><br><span class="line">date: 2016-03-30 21:12:21</span><br><span class="line">password: mikemessi</span><br><span class="line">abstract: 有东西被加密了, 请输入密码查看.</span><br><span class="line">message: 您好, 这里需要密码.</span><br><span class="line">theme: xray</span><br><span class="line">wrong<span class="emphasis">_pass_</span>message: 抱歉, 这个密码看着不太对, 请再试试.</span><br><span class="line">wrong<span class="emphasis">_hash_</span>message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.</span><br><span class="line">---</span><br></pre></td></tr></tbody></table></figure></li><li>可以在线挑选你喜欢的主题,并应用到你的博客中: <a target="_blank" rel="noopener" href="https://mhexo.github.io/2020/12/23/Theme-Test-Default/">default</a>、<a target="_blank" rel="noopener" href="https://mhexo.github.io/2020/12/23/Theme-Test-Blink/">blink</a>、<a target="_blank" rel="noopener" href="https://mhexo.github.io/2020/12/23/Theme-Test-Shrink/">shrink</a>、<a target="_blank" rel="noopener" href="https://mhexo.github.io/2020/12/23/Theme-Test-Flip/">flip</a>、<a target="_blank" rel="noopener" href="https://mhexo.github.io/2020/12/23/Theme-Test-Up/">up</a>、<a target="_blank" rel="noopener" href="https://mhexo.github.io/2020/12/23/Theme-Test-Surge/">surge</a>、<a target="_blank" rel="noopener" href="https://mhexo.github.io/2020/12/23/Theme-Test-Wave/">wave</a>、<a target="_blank" rel="noopener" href="https://mhexo.github.io/2020/12/23/Theme-Test-Xray/">xray</a></li><li>重新编译项目并进入对应的文章页即可看到加密效果</li></ol>
              </div>
            </details>

<h3 id="友链朋友圈"><a href="#友链朋友圈" class="headerlink" title="友链朋友圈"></a>友链朋友圈</h3><details cyan=""><summary> 效果预览 </summary>
              <div class="content">
              <p>效果请移步：<a href="https://fe32.top/frdcenter/">朋友圈</a></p>
              </div>
            </details>

<details yellow=""><summary> 查看教程 </summary>
              <div class="content">
              <ul><li>部署教程：<a target="_blank" rel="noopener" href="https://fcircle-doc.yyyzyyyz.cn/">文档</a> 、<a target="_blank" rel="noopener" href="https://fcircle-doc.is-a.dev/">备用地址</a></li><li><a target="_blank" rel="noopener" href="https://blog.zhheo.com/p/4e18a507.html">友链朋友圈5 - 我的部署历程与主题样式分享</a></li></ul>
              </div>
            </details>

<!-- ### 评论表情包放大 ###

请移步教程：[评论表情包放大功能，超实用](https://blog.leonus.cn/2022/owo-big.html)

### 评论输入提醒 ###

请移步教程：[给你的评论添加一个输入提醒吧](https://blog.leonus.cn/2022/inputAlert.html) -->

<!-- ## 遇到问题

<div class="tip faa-horizontal"><p>如果在搭建博客中遇到什么问题  ，请在 <span class='p yellow'>评论区</span> 留言 ，我会在第一时间内帮助您解决问题 。</p>
</div> --></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://fe32.top">Ethan.Tzy</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fe32.top/articles/hexo1606/">https://fe32.top/articles/hexo1606/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fe32.top" target="_blank">唐志远の博客</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/@3.7.1/tags/Hexo/">Hexo</a><a class="post-meta__tags" href="/@3.7.1/tags/Butterfly/">Butterfly</a></div><div class="post_share"><div class="social-share" data-image="https://bu.dusays.com/2022/06/05/629c5257753d1.png" data-sites="facebook,twitter,google,wechat,weibo,qq"></div><link rel="stylesheet" href="https://npm.elemecdn.com/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://npm.elemecdn.com/social-share.js/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button button--animated"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://bu.dusays.com/2022/05/17/6283c3f127558.jpg" target="_blank"><img class="post-qr-code-img" data-lazy-src="https://bu.dusays.com/2022/05/17/6283c3f127558.jpg" alt="wechat"/></a><div class="post-qr-code-desc">wechat</div></li><li class="reward-item"><a href="https://bu.dusays.com/2022/05/17/6283c3ee6d872.jpg" target="_blank"><img class="post-qr-code-img" data-lazy-src="https://bu.dusays.com/2022/05/17/6283c3ee6d872.jpg" alt="alipay"/></a><div class="post-qr-code-desc">alipay</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/@3.7.1/articles/hexo1605/"><img class="prev-cover" data-lazy-src="https://bu.dusays.com/2022/05/29/62939662553c9.png" onerror="onerror=null;src='https://bu.dusays.com/2022/01/14/82eed74cbb1e0.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">基于 Hexo 从零开始搭建个人博客（五）</div></div></a></div><div class="next-post pull-right"><a href="/@3.7.1/articles/hexo1600/"><img class="next-cover" data-lazy-src="https://bu.dusays.com/2022/06/05/629c65942cd1c.png" onerror="onerror=null;src='https://bu.dusays.com/2022/01/14/82eed74cbb1e0.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">基于 Hexo 从零开始搭建个人博客系列</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/@3.7.1/articles/hexo1601/" title="基于 Hexo 从零开始搭建个人博客（一）"><img class="cover" data-lazy-src="https://bu.dusays.com/2022/05/08/6277cd74796af.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-05-08</div><div class="title">基于 Hexo 从零开始搭建个人博客（一）</div></div></a></div><div><a href="/@3.7.1/articles/hexo1600/" title="基于 Hexo 从零开始搭建个人博客系列"><img class="cover" data-lazy-src="https://bu.dusays.com/2022/06/05/629c65942cd1c.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-06-05</div><div class="title">基于 Hexo 从零开始搭建个人博客系列</div></div></a></div><div><a href="/@3.7.1/articles/hexo1603/" title="基于 Hexo 从零开始搭建个人博客（三）"><img class="cover" data-lazy-src="https://bu.dusays.com/2022/05/26/628e6ab643d37.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-05-26</div><div class="title">基于 Hexo 从零开始搭建个人博客（三）</div></div></a></div><div><a href="/@3.7.1/articles/hexo1602/" title="基于 Hexo 从零开始搭建个人博客（二）"><img class="cover" data-lazy-src="https://bu.dusays.com/2022/05/25/628d12bdec61c.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-05-25</div><div class="title">基于 Hexo 从零开始搭建个人博客（二）</div></div></a></div><div><a href="/@3.7.1/articles/hexo1604/" title="基于 Hexo 从零开始搭建个人博客（四）"><img class="cover" data-lazy-src="https://bu.dusays.com/2022/05/26/628fa0426213d.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-05-26</div><div class="title">基于 Hexo 从零开始搭建个人博客（四）</div></div></a></div><div><a href="/@3.7.1/articles/hexo1615/" title="飞只因太美，给你的首页装上吧！"><img class="cover" data-lazy-src="https://bu.dusays.com/2022/11/06/63673dee7fa25.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-11-06</div><div class="title">飞只因太美，给你的首页装上吧！</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" data-lazy-src="https://bu.dusays.com/2022/05/02/626f92e193879.jpg" onerror="this.onerror=null;this.src='https://bu.dusays.com/2021/03/27/0106da541a922.gif'" alt="avatar"/><div class="author-info__name">Ethan.Tzy</div><div class="author-info__description">2023年的理想开始实现了吗？</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/@3.7.1/archives/"><div class="headline">文章</div><div class="length-num">101</div></a></div><div class="card-info-data-item is-center"><a href="/@3.7.1/tags/"><div class="headline">标签</div><div class="length-num">73</div></a></div><div class="card-info-data-item is-center"><a href="/@3.7.1/categories/"><div class="headline">分类</div><div class="length-num">20</div></a></div></div><div class="card-info-social-icons is-center"><a class="social-icon" href="http://wpa.qq.com/msgrd?v=3&amp;uin=2938526863&amp;site=qq&amp;menu=yes" target="_blank" title="QQ"><i class="fab fa-qq"></i></a><a class="social-icon" href="https://bu.dusays.com/2022/05/17/6283c39fcfc2f.png" target="_blank" title="Wechat"><i class="fab fa-weixin"></i></a><a class="social-icon" href="mailto:ethan4116@163.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="https://github.com/tzy13755126023" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="/@3.7.1/atom.xml" target="_blank" title="Rss"><i class="fas fa-rss"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content"><div style='text-indent:2em'>本站只保留入口，即将不再更新内容，请切换成回最新版本。</div><div id="qq-btn"><a id="a-qun" href="https://fe32.top/" target="_blank">回最新版本 ✨</a></div><div id="qq-btn" style="margin-top:10px"><a id="a-qun" href="https://qm.qq.com/cgi-bin/qm/qr?k=IqfyAyFpCIMln6xPXkjkI_gzF8zx29zK&jump_from=webapi&authKey=jcME5f+e8XES0vAaUTAaI24tsgUMdoIZ0oGwAOoHNpK1HSWdcI9zmSlWVdfw/ax+" target="_blank">加入QQ群 ✨</a></div></div></div><div class="card-widget tzy-right-widget" id="card-wechat"><div id="flip-wrapper"><div id="flip-content"><div class="face"></div><div class="back face"></div></div></div></div><div class="xpand" style="height:200px;"><canvas class="illo" width="800" height="800" style="max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;"></canvas></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95"><span class="toc-number">2.</span> <span class="toc-text">更新记录</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Butterfly%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96"><span class="toc-number">3.</span> <span class="toc-text">Butterfly主题美化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%94%9F%E6%88%90%E6%96%87%E7%AB%A0%E5%94%AF%E4%B8%80%E9%93%BE%E6%8E%A5"><span class="toc-number">3.1.</span> <span class="toc-text">生成文章唯一链接</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E5%BA%95%E9%83%A8-footer-%E8%B7%B3%E5%8A%A8%E7%9A%84%E5%BF%83"><span class="toc-number">3.2.</span> <span class="toc-text">页面底部 footer 跳动的心</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9%E6%A0%87%E9%A2%98%E6%A0%B7%E5%BC%8F"><span class="toc-number">3.3.</span> <span class="toc-text">修改标题样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0%E8%B1%86%E7%93%A3%E6%8F%92%E4%BB%B6"><span class="toc-number">3.4.</span> <span class="toc-text">添加豆瓣插件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0%E8%AE%BF%E5%AE%A2%E5%9C%B0%E5%9B%BE"><span class="toc-number">3.5.</span> <span class="toc-text">添加访客地图</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0Pixiv%E6%97%A5%E6%A6%9C"><span class="toc-number">3.6.</span> <span class="toc-text">添加Pixiv日榜</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9%E7%95%AA%E5%89%A7%E9%A1%B5%E9%9D%A2%E6%8F%92%E4%BB%B6"><span class="toc-number">3.7.</span> <span class="toc-text">哔哩哔哩番剧页面插件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0%E5%8D%A1%E9%80%9A%E4%BA%BA%E7%89%A9%EF%BC%88%E7%9C%8B%E6%9D%BF%E5%A8%98%EF%BC%89"><span class="toc-number">3.8.</span> <span class="toc-text">添加卡通人物（看板娘）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0%E5%85%A8%E5%B1%80%E5%90%B8%E5%BA%95APlayer"><span class="toc-number">3.9.</span> <span class="toc-text">添加全局吸底APlayer</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0%E8%B4%A1%E7%8C%AE%E6%97%A5%E5%8E%86"><span class="toc-number">3.10.</span> <span class="toc-text">添加贡献日历</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BB%E9%A1%B5%E5%86%92%E6%B3%A1%E7%89%B9%E6%95%88"><span class="toc-number">3.11.</span> <span class="toc-text">主页冒泡特效</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%BC%A0%E6%A0%87%E6%A0%B7%E5%BC%8F"><span class="toc-number">3.12.</span> <span class="toc-text">鼠标样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%BC%A0%E6%A0%87-%E5%AD%97%E8%B7%9F%E9%9A%8F%E6%8E%89%E8%90%BD%E6%95%88%E6%9E%9C"><span class="toc-number">3.13.</span> <span class="toc-text">鼠标 * 字跟随掉落效果</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%BB%9A%E5%8A%A8%E6%9D%A1"><span class="toc-number">3.14.</span> <span class="toc-text">滚动条</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%8B%E6%9C%BA%E4%BE%A7%E8%BE%B9%E6%A0%8F%E9%BB%98%E8%AE%A4%E4%B8%8D%E5%B1%95%E5%BC%80"><span class="toc-number">3.15.</span> <span class="toc-text">手机侧边栏默认不展开</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%BE%E5%BA%93"><span class="toc-number">3.16.</span> <span class="toc-text">图库</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AD%90%E9%A1%B5%E9%9D%A2"><span class="toc-number">3.16.1.</span> <span class="toc-text">子页面</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Valine%E8%AF%84%E8%AE%BA%E9%82%AE%E4%BB%B6%E5%9B%9E%E5%A4%8D%E6%8F%90%E9%86%92"><span class="toc-number">3.17.</span> <span class="toc-text">Valine评论邮件回复提醒</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%95%99%E7%A8%8B"><span class="toc-number">3.17.1.</span> <span class="toc-text">参考教程</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%88%91%E7%9A%84%E8%A1%A8%E6%83%85%E6%95%B0%E6%8D%AE%E5%8C%85"><span class="toc-number">3.17.2.</span> <span class="toc-text">我的表情数据包</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%94%B9%E5%86%99-menhera-%E8%A1%A8%E6%83%85%E6%A0%B7%E5%BC%8F"><span class="toc-number">3.17.3.</span> <span class="toc-text">改写 menhera 表情样式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0-%E5%8D%9A%E4%B8%BB-%E5%B0%8F%E4%BC%99%E4%BC%B4-%E8%AE%BF%E5%AE%A2-%E6%A0%87%E7%AD%BE"><span class="toc-number">3.17.4.</span> <span class="toc-text">添加[博主,小伙伴,访客]标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#valine%E8%8E%B7%E5%8F%96%E8%AF%84%E8%AE%BA%E5%A4%B1%E8%B4%A5"><span class="toc-number">3.17.5.</span> <span class="toc-text">valine获取评论失败</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A6%96%E9%A1%B5%E5%88%86%E7%B1%BB%E7%A3%81%E9%93%81"><span class="toc-number">3.18.</span> <span class="toc-text">首页分类磁铁</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BE%A7%E8%BE%B9%E6%A0%8F%E7%94%B5%E5%AD%90%E6%97%B6%E9%92%9F"><span class="toc-number">3.19.</span> <span class="toc-text">侧边栏电子时钟</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9B%B4%E6%8D%A2%E5%AD%97%E4%BD%93"><span class="toc-number">3.20.</span> <span class="toc-text">更换字体</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B1%80%E9%83%A8css%E4%BC%98%E5%8C%96"><span class="toc-number">3.21.</span> <span class="toc-text">局部css优化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%A6%81%E6%AD%A2%E5%8F%B3%E9%94%AE%E5%8F%8AF12%E7%AD%89%E4%BA%8B%E4%BB%B6"><span class="toc-number">3.22.</span> <span class="toc-text">禁止右键及F12等事件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%83%A8%E5%88%86%E5%8A%A8%E6%95%88%E8%AF%B4%E6%98%8E"><span class="toc-number">3.23.</span> <span class="toc-text">部分动效说明</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%83%A8%E5%88%86%E9%A1%B5%E9%9D%A2%E6%8F%92%E5%85%A5%E8%A7%86%E9%A2%91"><span class="toc-number">3.24.</span> <span class="toc-text">部分页面插入视频</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%AC%E5%91%8A%E6%A0%8F%E4%B8%A4%E4%B8%AA%E5%B0%8F%E4%BA%BA"><span class="toc-number">3.25.</span> <span class="toc-text">公告栏两个小人</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%98%9F%E7%A9%BA%E8%83%8C%E6%99%AF%E5%92%8C%E6%B5%81%E6%98%9F%E7%89%B9%E6%95%88"><span class="toc-number">3.26.</span> <span class="toc-text">星空背景和流星特效</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%B1%E8%8A%B1%E9%A3%98%E8%90%BD%E6%95%88%E6%9E%9C"><span class="toc-number">3.27.</span> <span class="toc-text">樱花飘落效果</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%81%AF%E7%AC%BC%E7%89%B9%E6%95%88"><span class="toc-number">3.28.</span> <span class="toc-text">灯笼特效</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%96%E6%8C%82%E6%A0%87%E7%AD%BE"><span class="toc-number">3.29.</span> <span class="toc-text">外挂标签</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0github%E5%BE%BD%E6%A0%87"><span class="toc-number">3.30.</span> <span class="toc-text">添加github徽标</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8F%B3%E9%94%AE%E8%8F%9C%E5%8D%95"><span class="toc-number">3.31.</span> <span class="toc-text">自定义右键菜单</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8A%A0%E8%BD%BD%E5%8A%A8%E7%94%BB"><span class="toc-number">3.32.</span> <span class="toc-text">加载动画</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%84%E8%AE%BA%E5%BC%B9%E5%B9%95"><span class="toc-number">3.33.</span> <span class="toc-text">评论弹幕</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A1%B5%E8%84%9A"><span class="toc-number">3.34.</span> <span class="toc-text">自定义页脚</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BE%A7%E8%BE%B9%E6%A0%8F%E5%85%AC%E4%BC%97%E5%8F%B7"><span class="toc-number">3.35.</span> <span class="toc-text">侧边栏公众号</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E5%8A%A0%E5%AF%86%E6%8F%92%E4%BB%B6"><span class="toc-number">3.36.</span> <span class="toc-text">文章加密插件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%8B%E9%93%BE%E6%9C%8B%E5%8F%8B%E5%9C%88"><span class="toc-number">3.37.</span> <span class="toc-text">友链朋友圈</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/@3.7.1/articles/joy10001/" title="被发现了，这些吊炸天的摸鱼网站！"><img data-lazy-src="https://bu.dusays.com/2023/06/18/648f1359dc90f.png" onerror="this.onerror=null;this.src='https://bu.dusays.com/2022/01/14/82eed74cbb1e0.jpg'" alt="被发现了，这些吊炸天的摸鱼网站！"/></a><div class="content"><a class="title" href="/@3.7.1/articles/joy10001/" title="被发现了，这些吊炸天的摸鱼网站！">被发现了，这些吊炸天的摸鱼网站！</a><time datetime="2023-06-18T16:40:07.000Z" title="发表于 2023-06-19 00:40:07">2023-06-19</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/@3.7.1/articles/vue20002/" title="解决 Vue 中使用 Echarts 出现 There Is a Chart Instance Already Initialized on the Dom 的警告问题"><img data-lazy-src="https://bu.dusays.com/2023/06/18/648ed3f987511.png" onerror="this.onerror=null;this.src='https://bu.dusays.com/2022/01/14/82eed74cbb1e0.jpg'" alt="解决 Vue 中使用 Echarts 出现 There Is a Chart Instance Already Initialized on the Dom 的警告问题"/></a><div class="content"><a class="title" href="/@3.7.1/articles/vue20002/" title="解决 Vue 中使用 Echarts 出现 There Is a Chart Instance Already Initialized on the Dom 的警告问题">解决 Vue 中使用 Echarts 出现 There Is a Chart Instance Already Initialized on the Dom 的警告问题</a><time datetime="2023-06-18T16:20:32.000Z" title="发表于 2023-06-19 00:20:32">2023-06-19</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/@3.7.1/articles/hexo1619/" title="如何新窗口打开导航链接？"><img data-lazy-src="https://bu.dusays.com/2023/06/04/647c9bb365e09.png" onerror="this.onerror=null;this.src='https://bu.dusays.com/2022/01/14/82eed74cbb1e0.jpg'" alt="如何新窗口打开导航链接？"/></a><div class="content"><a class="title" href="/@3.7.1/articles/hexo1619/" title="如何新窗口打开导航链接？">如何新窗口打开导航链接？</a><time datetime="2023-06-04T13:53:07.000Z" title="发表于 2023-06-04 21:53:07">2023-06-04</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/@3.7.1/articles/ts30001/" title="一文读懂TS的(.d.ts)文件"><img data-lazy-src="https://bu.dusays.com/2023/04/29/644d384035bca.png" onerror="this.onerror=null;this.src='https://bu.dusays.com/2022/01/14/82eed74cbb1e0.jpg'" alt="一文读懂TS的(.d.ts)文件"/></a><div class="content"><a class="title" href="/@3.7.1/articles/ts30001/" title="一文读懂TS的(.d.ts)文件">一文读懂TS的(.d.ts)文件</a><time datetime="2023-04-30T14:28:06.000Z" title="发表于 2023-04-30 22:28:06">2023-04-30</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/@3.7.1/articles/vue20001/" title="Property 'Xxx' Does Not Exist on Type 'AxiosResponse&lt;any, Any&gt;' 的解决办法"><img data-lazy-src="https://bu.dusays.com/2023/04/29/644d249bc9001.png" onerror="this.onerror=null;this.src='https://bu.dusays.com/2022/01/14/82eed74cbb1e0.jpg'" alt="Property 'Xxx' Does Not Exist on Type 'AxiosResponse&lt;any, Any&gt;' 的解决办法"/></a><div class="content"><a class="title" href="/@3.7.1/articles/vue20001/" title="Property 'Xxx' Does Not Exist on Type 'AxiosResponse&lt;any, Any&gt;' 的解决办法">Property 'Xxx' Does Not Exist on Type 'AxiosResponse&lt;any, Any&gt;' 的解决办法</a><time datetime="2023-04-30T12:34:18.000Z" title="发表于 2023-04-30 20:34:18">2023-04-30</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('https://bu.dusays.com/2021/03/06/38a2c5cd8b44e.jpg')"><div id="footer-wrap"><div id="ft"><div class="ft-item-1"><div class="t-top"><div class="t-t-l"><p class="ft-t t-l-t">公益广告</p><div class="bg-ad"><div>国家反诈中心是国务院打击治理电信网络新型违法犯罪工作部际联席会议合成作战平台，集资源整合、情报研判、侦查指挥为一体，在打击、防范、治理电信网络诈骗等新型违法犯罪中发挥着重要作用。</div><div class="btn-xz-box"><a class="btn-xz" target="_blank" rel="noopener" href="https://www.hack-gov.com.cn/posts/21480.html">下载（国家反诈中心） APP</a></div></div></div><div class="t-t-r"><p class="ft-t t-l-t">修仙导航</p><ul class="ft-links"><li><a target="_blank" rel="noopener" href="https://tzy1997.com/articles/hexo1600/">建站指南</a><a target="_blank" rel="noopener" href="https://tzy1997.com/nav.html">网址导航</a></li><li><a target="_blank" rel="noopener" href="https://tzy1997.com/sponsorWall/">来杯咖啡</a><a target="_blank" rel="noopener" href="https://tzy1997.com/comments/">留点什么</a></li><li><a target="_blank" rel="noopener" href="https://tzy1997.com/about/">关于博主</a><a target="_blank" rel="noopener" href="https://tzy1997.com/archives/">文章归档</a></li><li><a target="_blank" rel="noopener" href="https://tzy1997.com/categories/">文章分类</a><a target="_blank" rel="noopener" href="https://tzy1997.com/tags/">文章标签</a></li><li><a target="_blank" rel="noopener" href="https://tzy1997.com/gallery/">我的相册</a><a target="_blank" rel="noopener" href="https://tzy1997.com/bangumis/">我的追番</a></li><li><a target="_blank" rel="noopener" href="https://tzy1997.com/specialEffects/">一些特效</a><a target="_blank" rel="noopener" href="https://tzy1997.com/wallpaper/">一些壁纸</a></li></ul></div></div></div><div class="ft-item-2"><p class="ft-t">推荐友链</p><div class="ft-img-group"><div class="img-group-item"><a target="_blank" rel="noopener" href="https://tzy1997.com/"><img src="https://bu.dusays.com/2022/05/02/626f92e193879.jpg" alt=""/></a></div><div class="img-group-item"><a target="_blank" rel="noopener" href="https://blog.zhheo.com/"><img src="https://npm.elemecdn.com/guli-heo/img/avatar2.png" alt=""/></a></div><div class="img-group-item"><a target="_blank" rel="noopener" href="https://www.thyuu.com/"><img src="https://npm.elemecdn.com/imgscdn/img/202111191951780.JPG" alt=""/></a></div><div class="img-group-item"><a target="_blank" rel="noopener" href="https://dusays.com/"><img src="https://cdn.dusays.com/avatar.png" alt=""/></a></div><div class="img-group-item"><a target="_blank" rel="noopener" href="https://akilar.top/"><img src="https://npm.elemecdn.com/akilar-candyassets/image/siteicon/favicon.png" alt=""/></a></div><div class="img-group-item"><a target="_blank" rel="noopener" href="https://www.fomal.cc/"><img src="https://bu.dusays.com/2022/11/06/6367af8667f0e.webp" alt=""/></a></div><div class="img-group-item"><a target="_blank" rel="noopener" href="https://www.startly.cn/"><img src="https://bu.dusays.com/2023/04/15/643a99cb740a4.jpg" alt=""/></a></div><div class="img-group-item"><a href="javascript:btf.snackbarShow(&quot;预留友链位~~&quot;)"><img src="https://bu.dusays.com/2022/05/02/626f92e193879.jpg" alt=""/></a></div></div></div></div><div class="copyright">&copy;2020 - 2023  <i id="heartbeat" class="fa fas fa-heartbeat"></i> Ethan.Tzy</div><div class="footer_custom_text">I wish you to become your own sun, no need to rely on who's light.✨✨✨<p><a target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo"></a>&nbsp;<a target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly"></a>&nbsp;<a target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr为静态资源提供CDN加速"></a> &nbsp;<a target="_blank" href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Vervel-brightgreen?style=flat&logo=Vercel" title="本站采用双线部署，默认线路托管于Vercel"></a>&nbsp;<a target="_blank" href="https://icp.gov.moe/?keyword=20220686" title="本站已加入萌ICP豪华套餐，萌ICP备20220686号"><img src="https://img.shields.io/badge/%E8%90%8CICP%E5%A4%87-20220686-fe1384?style-flat&amp;logo="></a>&nbsp;<a target="_blank" href="https://vercel.com/"><img src="https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio" title="本站采用双线部署，联通线路托管于Coding"></a>&nbsp;<a target="_blank" href="https://github.com/"><img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站项目由Gtihub托管"></a>&nbsp;<a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"></a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="chat_btn" type="button" title="在线聊天"><i class="fas fa-sms"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="algolia-search"><div class="search-dialog"><div class="search-dialog__title" id="algolia-search-title">Algolia</div><div id="algolia-input-panel"><div id="algolia-search-input"></div></div><hr/><div id="algolia-search-results"><div id="algolia-hits"></div><div id="algolia-pagination"></div><div id="algolia-stats"></div></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div id="rightMenu"><div class="rightMenu-group rightMenu-small"><div class="rightMenu-item" id="menu-backward"><i class="fa-solid fa-arrow-left"></i></div><div class="rightMenu-item" id="menu-forward"><i class="fa-solid fa-arrow-right"></i></div><div class="rightMenu-item" id="menu-refresh"><i class="fa-solid fa-arrow-rotate-right"></i></div><div class="rightMenu-item" id="menu-home"><i class="fa-solid fa-house"></i></div></div><div class="rightMenu-group rightMenu-line rightMenuPlugin"><div class="rightMenu-item" id="menu-copytext"><i class="fa-solid fa-copy"></i><span>复制文本</span></div><div class="rightMenu-item" id="menu-newwindow"><i class="fa-solid fa-window-restore"></i><span>新窗口打开</span></div><div class="rightMenu-item" id="menu-copylink"><i class="fa-solid fa-copy"></i><span>复制链接地址</span></div><div class="rightMenu-item" id="menu-copyimg"><i class="fa-solid fa-copy"></i><span>复制图片</span></div><div class="rightMenu-item" id="menu-downloadimg"><i class="fa-solid fa-download"></i><span>下载图片</span></div><div class="rightMenu-item" id="menu-search"><i class="fa-solid fa-magnifying-glass"></i><span>站内搜索</span></div><div class="rightMenu-item" id="menu-searchBaidu"><i class="fa-solid fa-magnifying-glass"></i><span>百度搜索</span></div></div><div class="rightMenu-group rightMenu-line rightMenuOther"><div class="rightMenu-item" id="menu-radompage"><i class="fa-solid fa-shoe-prints"></i><span>随便逛逛</span></div><a class="rightMenu-item menu-link" href="/archives/"><i class="fa-solid fa-archive"></i><span>文章归档</span></a><a class="rightMenu-item menu-link" href="/categories/"><i class="fa-solid fa-folder-open"></i><span>文章分类</span></a><a class="rightMenu-item menu-link" href="/tags/"><i class="fa-solid fa-tags"></i><span>文章标签</span></a><a class="rightMenu-item" id="menu-goto-comment" href="#post-comment"><i class="fas fa-comment"></i><span>空降评论</span></a><a class="rightMenu-item menu-link" href="/sponsorWall/"><i class="fa-solid fa-money-check-alt"></i><span>赞助墙</span></a></div><div class="rightMenu-group rightMenu-line rightMenuNormal"><div class="rightMenu-item" id="menu-translate"><i class="fa-solid fa-earth-asia"></i><span>繁简切换</span></div><div class="rightMenu-item" id="menu-readmode"><i class="fa-solid fa-book-open"></i><span>阅读模式</span></div><div class="rightMenu-item" id="menu-print"><i class="fa-solid fa-print fa-fw"></i><span>打印页面</span></div><div class="rightMenu-item" id="menu-copy"><i class="fa-solid fa-share"></i><span>分享本页</span></div></div></div><div id="rightmenu-mask"></div><div id="myscoll"></div><div><script src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script><script src="/@3.7.1/"></script><script src="https://npm.elemecdn.com/ethan4116-blog/lib/@3.7.1/js/utils.js"></script><script src="https://npm.elemecdn.com/ethan4116-blog/lib/@3.7.1/js/main.js"></script><script src="https://npm.elemecdn.com/ethan4116-blog/lib/js/theme/tw_cn.js"></script><script src="https://npm.elemecdn.com/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script><script src="https://npm.elemecdn.com/ethan4116-blog/lib/js/theme/search/algolia.js"></script><script async="async">var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())
setTimeout(function(){preloader.endLoading();}, 5000);</script><div class="js-pjax"><script>(()=>{
  const $countDom = document.getElementById('twikoo-count')
  const init = () => {
    twikoo.init(Object.assign({
      el: '#twikoo-wrap',
      envId: 'https://twikoo.fe32.top/',
      region: '',
      onCommentLoaded: function () {
        //- const ele = document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)')
      }
    }, null))
  }

  const getCount = () => {
    twikoo.getCommentsCount({
      envId: 'https://twikoo.fe32.top/',
      region: '',
      urls: [window.location.pathname],
      includeReply: false
    }).then(function (res) {
      $countDom.innerText = res[0].count
    }).catch(function (err) {
      console.error(err);
    });
  }

  const loadTwikoo = (bool = false) => {
    if (typeof twikoo === 'object') {
      init()
      bool && $countDom && setTimeout(getCount,0)
    } else {
      getScript('https://fastly.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js').then(()=> {
        init()
        bool && $countDom && setTimeout(getCount,0)
      })
    }
  }

  if ('Twikoo' === 'Twikoo' || !true) {
    if (true) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
    else loadTwikoo(true)
  } else {
    window.loadOtherComment = () => {
      loadTwikoo()
    }
  }
})()</script></div><script>window.addEventListener('load', () => {
  const changeContent = (content) => {
    if (content === '') return content

    content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
    content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
    content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
    content = content.replace(/<[^>]+>/g,"") // remove html tag

    if (content.length > 150) {
      content = content.substring(0,150) + '...'
    }
    return content
  }

  const getComment = () => {
    const runTwikoo = () => {
      twikoo.getRecentComments({
        envId: 'https://twikoo.fe32.top/',
        region: '',
        pageSize: 6,
        includeReply: true
      }).then(function (res) {
        const twikooArray = res.map(e => {
          return {
            'content': changeContent(e.comment),
            'avatar': e.avatar,
            'nick': e.nick,
            'url': e.url + '#' + e.id,
            'date': new Date(e.created).toISOString()
          }
        })

        saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), 10/(60*24))
        generateHtml(twikooArray)
      }).catch(function (err) {
        const $dom = document.querySelector('#card-newest-comments .aside-list')
        $dom.innerHTML= "无法获取评论，请确认相关配置是否正确"
      })
    }

    if (typeof twikoo === 'object') {
      runTwikoo()
    } else {
      getScript('https://fastly.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js').then(runTwikoo)
    }
  }

  const generateHtml = array => {
    let result = ''

    if (array.length) {
      for (let i = 0; i < array.length; i++) {
        result += '<div class=\'aside-list-item\'>'

        if (true) {
          const name = 'data-lazy-src'
          result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'></a>`
        }
        
        result += `<div class='content'>
        <a class='comment' href='${array[i].url}'>${array[i].content}</a>
        <div class='name'><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
        </div></div>`
      }
    } else {
      result += '没有评论'
    }

    let $dom = document.querySelector('#card-newest-comments .aside-list')
    $dom.innerHTML= result
    window.lazyLoadInstance && window.lazyLoadInstance.update()
    window.pjax && window.pjax.refresh($dom)
  }

  const newestCommentInit = () => {
    if (document.querySelector('#card-newest-comments .aside-list')) {
      const data = saveToLocal.get('twikoo-newest-comments')
      if (data) {
        generateHtml(JSON.parse(data))
      } else {
        getComment()
      }
    }
  }

  newestCommentInit()
  document.addEventListener('pjax:complete', newestCommentInit)
})</script><div class="pjax-reload"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1s');
    arr[i].setAttribute('data-wow-delay', '1s');
    arr[i].setAttribute('data-wow-offset', '100');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('site-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__flipInY');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '100ms');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('github-badge');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__flipInX');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '100ms');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer="defer" src="https://npm.elemecdn.com/ethan4116-blog/lib/js/theme/wow.min.js"></script><script defer="defer" src="https://npm.elemecdn.com/ethan4116-blog/lib/js/theme/wow_init.js"></script><div class="aplayer no-destroy" data-id="7427714271" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-lrctype="1" data-preload="none" data-autoplay="true" muted></div><script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script><script defer data-pjax src="https://npm.elemecdn.com/ethan4116-blog/lib/js/other/cat.js"></script><script defer src="https://npm.elemecdn.com/ethan4116-blog/lib/@3.7.1/js/issues.js"></script><script defer data-pjax src="https://npm.elemecdn.com/ethan4116-blog/lib/js/other/two-people/twopeople1.js"></script><script defer data-pjax src="https://npm.elemecdn.com/ethan4116-blog/lib/js/other/two-people/zdog.dist.js"></script><script defer data-pjax src="https://npm.elemecdn.com/ethan4116-blog/lib/js/other/two-people/twopeople.js"></script><canvas id="universe"></canvas><script defer src="https://npm.elemecdn.com/ethan4116-blog/lib/js/theme/universe.js"></script><script defer src="https://npm.elemecdn.com/ethan4116-blog/lib/@3.7.1/js/ethan_tzy.js"></script><script defer src="https://npm.elemecdn.com/ethan4116-blog/lib/right-menu/rightMenu@3.7.1.js"></script><script async src="//at.alicdn.com/t/font_2315348_g8vs01iykv.js"></script><script async src="https://www.googletagmanager.com/gtag/js?id=G-92YZLM7C2B"></script><script> window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-92YZLM7C2B');</script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9697737937582017" crossorigin="anonymous"></script><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?bbcbaf179f87d03d28c3ba72c79a5640";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script><script>!function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"Jo9JJAc5cBaxwwnJ",ck:"Jo9JJAc5cBaxwwnJ"});</script><script src="https://npm.elemecdn.com/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = false;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script id="click-heart" src="https://npm.elemecdn.com/butterfly-extsrc@1/dist/click-heart.min.js" async="async" mobile="false"></script><script>window.$crisp = [];
window.CRISP_WEBSITE_ID = "58b8ce9e-19e0-46ff-8e8d-6ee1b1b25c45";
(function () {
  d = document;
  s = d.createElement("script");
  s.src = "https://client.crisp.chat/l.js";
  s.async = 1;
  d.getElementsByTagName("head")[0].appendChild(s);
})();
$crisp.push(["safe", true])

if (true) {
  $crisp.push(["do", "chat:hide"])
  $crisp.push(["on", "chat:closed", function() {
    $crisp.push(["do", "chat:hide"])
  }])
  var chatBtnFn = () => {
    var chatBtn = document.getElementById("chat_btn")
    chatBtn.addEventListener("click", function(){
      $crisp.push(["do", "chat:show"])
      $crisp.push(["do", "chat:open"])

    });
  }
  chatBtnFn()
} else {
  if (false) {
    function chatBtnHide () {
      $crisp.push(["do", "chat:hide"])
    }
    function chatBtnShow () {
      $crisp.push(["do", "chat:show"])
    }
  }
}</script><link rel="stylesheet" href="https://npm.elemecdn.com/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://npm.elemecdn.com/aplayer/dist/APlayer.min.js"></script><script src="https://npm.elemecdn.com/ethan4116-blog/lib/js/theme/meting.min.js"></script><script src="https://npm.elemecdn.com/pjax/pjax.min.js"></script><script>let pjaxSelectors = [
  'title',
  '#config-diff',
  '#body-wrap',
  '#rightside-config-hide',
  '#rightside-config-show',
  '.js-pjax'
]

if (false) {
  pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
}

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener toc scroll 
  window.removeEventListener('scroll', window.tocScrollFn)

  typeof preloader === 'object' && preloader.initLoading()

  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  //- document.querySelectorAll('script[data-pjax]').forEach(item => {
  
  document.querySelectorAll('script[data-pjax], .pjax-reload script').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // Analytics
  if (false) {
    MtaH5.pgv()
  }

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})


//- document.addEventListener('pjax:send', function () {
//-   typeof preloader === 'object' && preloader.initLoading()
  
//-   if (window.aplayers) {
//-     for (let i = 0; i < window.aplayers.length; i++) {
//-       if (!window.aplayers[i].options.fixed) {
//-         window.aplayers[i].destroy()
//-       }
//-     }
//-   }

//-   typeof typed === 'object' && typed.destroy()

//-   //reset readmode
//-   const $bodyClassList = document.body.classList
//-   $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

//- })

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    if (false) {
      location.hash && e.request.responseURL !== location.href ? pjax.loadUrl(location.href) : pjax.loadUrl('/404.html')
      return
    }
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>